Vue快速使用

1 vue:就是一个js框架，跟jquery很像
2 cdn，下载到本地，script中引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>

前端现状

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下

`，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以`自底向上逐层应用`
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

渐进式框架

可以一点一点地使用它，只用一部分，也可以整个项目都使用它，就是一个前端项目

网站

官网：https://cn.vuejs.org/

文档：https://cn.vuejs.org/v2/guide/

版本

1.X：使用得较少

2.X：普遍使用

3.X：刚出没多久，只有Beta版

Vue特点

易用

通过 HTML、CSS、JavaScript构建应用

灵活

不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。

高效

20kB min+gzip 运行大小

超快虚拟 DOM

最省心的优化

MVVM架构

MVVM介绍

1 M(数据层)----V(页面展示)----VM（vm）

2 双向数据绑定：JS中变量变了，HTML中数据也跟着改变

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）

MVVM的特性

低耦合：视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变

可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View重用这端视图的逻辑（以此减少代码冗余）

独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

可测试：界面元素是比较难以测试的，而现在的测试可以针对ViewModel来编写

单页面开发和组件化开发
组件化开发：
类似于DTL中的include，每一个组件的内容都可以被替换和复用

单页面开发：
只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html

nodejs介绍

1 javascript:只能运行在浏览器中，解释型语言，浏览器里有它的解释器
2 谷歌的V8引擎，抠出来，运行在操作系统之上，c写了一些底层包
3 nodejs：解释器，写javascript的代码
4 前端工程师，不用学后端语言，只会js，就可以写后端了
5 node：python，6 npm：pip3，用来安装第三方包

## 前端开发的ide

- WebStorm

是JetBrains公司旗下一款JavaScript 开发工具。已经被广大中国JS开发者誉为“Web前端开发神器”

“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

- VS code

Visual Studio Code（简称“VS Code”）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows

　　和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器，可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对
　　JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（
　　例如.NET和Unity）扩展的生态系统。

- HBuilder

HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。 [1] HBuilder的编写用到了Java、C、Web和Ruby。
　　 HBuilder本身主体是由Java编写。

- Sublime Text

Sublime Text 是一个文本编辑器（收费软件，可以无限期试用，但是会有激活提示弹窗），同时也是一个先进的代码编辑器。
　　 Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来，它最初被设计为一个具有丰富扩展功能的Vim。Sublime Text具
　　有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text的主
　　要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨
　　平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。

## 我们开发用pycharm

- webstorm和pycharm是一家，只需要装vue插件

模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插值语法</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>字符串：{{ name }}</h1>
    <h1>数值：{{ age }}</h1>
    <h2>数组：{{ name_list }}</h2>
    <h3>对象：{{ person_info }}</h3>
    <h4>{{ link }}</h4>
    <h4>对象取值：{{ person_info.age }}</h4>
    <h4>数组取值：{{ name_list[1] }}</h4>
    <h4>运算：{{ 10+20+30 }}</h4>
    <h4>三元运算：{{ 10>20?\'是\':\'否\' }}</h4>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: \'geng\',  //字符串
            age:18, //数值
            name_list: [\'刘一\', \'陈二\', \'张三\', \'李四\', \'王五\', \'赵六\'], //对象
            person_info:{name:\'geng\',age:18},
            link:\'<a href="http://www.baidu.com">点我</a>\'
        }
    });
</script>
</html>

指令

文本指令,事件指令

文本指令:

v-text 标签内容显示js变量对应的值

v-html 让HTML渲染成页面

v-if 放1个布尔值：为真标签就显示；为假标签就不显示

v-show 放1个布尔值：为真标签就显示；为假标签就不显示

v-show与 v-if的区别：

v-show：标签还在，只是不显示了（display: none）

v-if：直接操作DOM，删除/插入标签


事件指令:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>1

属性指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>3

style和class的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>4

可以检测到变动的数组页面也跟着编号的操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>5

检测不到变动的数组页面不变化的操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>7

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>8

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
{{ message }}
    <br>
    <h1>{{  name }}</h1>
</div>
</body>
<script>
    //el:指的是被vue接管的div，以后再操作这个div，都是通过vue操作
    var app = new Vue({
        el: \'#app\',
        data: {
            message: \'Hello world!\',
            name:\'lqz\'
        }
    })
</script>
</html>9

列表渲染(购物车)

v-if+v-for+v-else控制购物车商品的显示

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下0

View Code

v-for遍历数组(列表)、对象(字典)、数字

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下1

View Code

事件处理

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下2

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下3

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下5

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下6

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下7

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下8

1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下9

过滤案件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <style>
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-md-offset-3">
            <div id="app">
                <!--                <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="text" v-model="name" placeholder="光标移开触发-1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下8" v-on:1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下8="handle_1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下8">-->
                <!--                <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="text" v-model="name" placeholder="请输入要搜索的内容-1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6" v-on:1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6="handle_1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6">-->
<!--                <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="text" v-model="name" placeholder="请输入要搜索的内容-1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4" v-on:1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4="handle_1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4">-->
                <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="text" v-model="name" placeholder="请输入要搜索的内容-1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4" @1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4="handle_1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4">
                <ul>
                    <li v-for="l in list">{{l}}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            name: \'\',
            list_old: [\'a\', \'atm\', \'atmtw\', \'atmtwxx\', \'b\', \'body\', \'bodyxx\', \'tm\', \'m\'],
            list: [\'a\', \'atm\', \'atmtw\', \'atmtwxx\', \'b\', \'body\', \'bodyxx\', \'tm\', \'m\']
        },
        methods: {
            handle_1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4() {
                //只要输入框文字发生变化，就会触发它
                //根据输入的值，过滤list
                // let _this=this
                // this.list.filter(function (item) {
                //     console.log(_this.list_old)
                //
                // })
                this.list = this.list_old.filter(item => {
                    if (item.indexOf(this.name) > -1) {
                        return true
                    } else {
                        return false
                    }
                })
            },
            handle_1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6() {
                console.log(\'1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6\')
                console.log(this.name)
            },
            handle_1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下8() {
                console.log(\'1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下8\')
                console.log(this.name)
            },
        }
    })
    // let list = [\'a\', \'atm\', \'atmtw\', \'atmtwxx\', \'b\', \'body\', \'bodyxx\', \'tm\', \'m\']
    // let list_new=list.filter(function (item) {
    //     if(item.length>=3){
    //         return true
    //     }else{
    //         return false
    //     }
    //
    // })
    //箭头函数---es6的语法
    // let list_new = list.filter(item => {
    //     if (item.length >= 3) {
    //         return true
    //     } else {
    //         return false
    //     }
    // })
    // console.log(list_new)
    //
    //
    // var a = (data, a) => {
    //
    // }
    // var b = function (data, a) {
    //
    //
    // }
    let a=\'efy\'
    let str_a=\'abcdefg\'
    console.log(str_a.indexOf(a))
</script>
</html>

View Code

事件修饰符

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）1

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）2

.stop

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）3

.self

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）4

.prevent

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）5

.once

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）6

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）7

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）8

阻止事件冒泡

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式

Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中

View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）

ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，
　　　　　　 data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）9

按键修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="text" @keyup.enter="handle" v-model="search">-->
<!--    <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="text" @keyup="handle" v-model="search">-->
    <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="text" @keydown="handle" v-model="search">
</div>
</body>
<script>
    var vm = new Vue({
        el: \'#app\',
        data: {
            search:\'\'
        },
        methods: {
            handle(){
                console.log(\'enter建被放开了\')
                location.href=\'https://www.baidu.com/s?wd=\'+this.search
            }
        }
    })
</script>
</html>

数据双向绑定

v-model的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4-group">
                    <label for="name">用户名</label>
                    <!-- v-model数据的双向绑定，只针对1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4的属性 -->
                    <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 class="form-control" type="text" v-model="name">
                </div>
                <div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4-group">
                    <label for="password">密码</label>
                    <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 class="form-control" type="password" v-model="password"><span>{{error}}</span>
                </div>
                <hr>
                您输入的名字是：{{name}}
                <hr>
                <button @click="submit_1">登录</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: \'#box\',
        data: {
            name: \'\',
            password: \'\',
            error: \'\',
        },
        methods: {
            submit_1() {
                if (this.name == \'lqz\' && this.password == \'123\') {
                    location.href = \'http://www.baidu.com\'
                } else {
                    this.error = \'用户名或密码错误\'
                }
            }
        }
    })
</script>
</html>

表单控制

checkbox选中

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<!-- v-model数据的双向绑定，只针对1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4的属性 -->

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 class="form-control" type="text" v-model="name" placeholder="请输入用户名">

</div>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 class="form-control" type="password" v-model="password" placeholder="请输入密码">

</div>

<hr>

您输入的名字是：{{name}}

<hr>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="check_1">

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="radio_1">

</div>

</body>

var vm = new Vue({

el: \'#box\',

data: {

password: \'\',

checkbox_1: false,

radio_1:false,

})

</script>

</html>

单选，多选

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<!-- v-model数据的双向绑定，只针对1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4的属性 -->

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 class="form-control" type="text" v-model="name" placeholder="请输入用户名">

</div>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 class="form-control" type="password" v-model="password" placeholder="请输入密码">

</div>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="radio" v-model="sex" value="男">男

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="radio" v-model="sex" value="女">女

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="radio" v-model="sex" value="未知">未知

<br><br>您的性别：{{sex}}

</div>

<hr>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="hobby" value="篮球">篮球

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="hobby" value="足球">足球

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="hobby" value="桌球">桌球

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="hobby" value="棒球">棒球

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="hobby" value="羽毛球">羽毛球

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="hobby" value="乒乓球">乒乓球

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 type="checkbox" v-model="hobby" value="双色球">双色球

<br><br>您喜欢的球类：{{hobby}}

</div>

</body>

var vm = new Vue({

el: \'#box\',

data: {

password: \'\',

sex: \'\',

hobby:[],

})

</script>

</html>

购物车案例

基础-结算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本购物车计算商品价格</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <h2 class="text-center">购物车</h2>
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-condensed text-center">
                    <tr>
                        <td class="active">图片</td>
                        <td class="success">名称</td>
                        <td class="info">价格</td>
                        <td class="danger">数量</td>
                        <td class="warning">选择</td>
                    </tr>
                    <tr v-for="good in goods">
                        <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td>
                        <td class="danger">{{good.name}}</td>
                        <td class="warning">{{good.price}}</td>
                        <td class="success">{{good.count}}</td>
                        <!-- v-model绑定数据，value绑定商品对象 @1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6选中没选中都触发事件-->
                        <td class="active"><1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="checkbox" v-model="checkGroup" :value="good" @1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6="sumPrice"></td>
                    </tr>
                </table>
                选中的商品：{{checkGroup}}
                <br>
                总价格：{{sumPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: \'#box\',
        data: {
            goods: [
                {id: 1, name: \'汉堡\', price: 16, count: 1, img: \'./img/hanbao.jpg\'},
                {id: 1, name: \'鸡肉卷\', price: 10, count: 1, img: \'./img/jiroujuan.jpg\'},
                {id: 1, name: \'炸鸡\', price: 28, count: 1, img: \'./img/zhaji.jpg\'},
                {id: 1, name: \'啤酒\', price: 8, count: 1, img: \'./img/pijiu.jpg\'},
                {id: 1, name: \'可乐\', price: 6, count: 1, img: \'./img/kele.jpg\'},],
            checkGroup:[],
            // totalPrice：0 方式一需要在全局定义
        },
        methods: {
            // 方式一
                 // sumPrice(){
            //     this.totalPrice=0 //先置0再去改
            //     for (i in this.checkGroup){ // 这里的 i 是索引，每次根据索引取值
            //         this.totalPrice+=this.checkGroup[i].price*this.checkGroup[i].count
            //
            //     }
            //
            // }
            // 方式二
            // 函数内使用的vue中的变量，只要发生变化，函数会重新运算
            sumPrice(){
                let totalPrice = 0
                // for (i=0;i<this.checkGroup.length;i++){//索引循环
                for (i in this.checkGroup){ //迭代循环，在Vue当中是取值，在JS中第一个值是索引
                                  //只要checkGroup发生变化，就会重新运算，totalPrice也就跟着变化
                    totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
                }
                return totalPrice
            }
        },
    })
</script>
</html>

进阶-全选/全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本购物车计算商品价格</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <h2 class="text-center">购物车</h2>
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-condensed text-center">
                    <tr>
                        <td class="active">图片</td>
                        <td class="success">名称</td>
                        <td class="info">价格</td>
                        <td class="danger">数量</td>
                        <td class="warning">全选/不全选
                            <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="checkbox" v-model="checkAll" @1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6="handleCheckAll">
                        </td>
                    </tr>
                    <tr v-for="good in goods">
                        <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td>
                        <td class="danger">{{good.name}}</td>
                        <td class="warning">{{good.price}}</td>
                        <td class="success">{{good.count}}</td>
                        <td class="active"><1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="checkbox" v-model="checkGroup" :value="good" @1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6="checkOne"></td>
                    </tr>
                </table>
                选中的商品：{{checkGroup}}
                <br>
                总价格：{{sumPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: \'#box\',
        data: {
            goods: [
                {id: 1, name: \'汉堡\', price: 16, count: 1, img: \'./img/hanbao.jpg\'},
                {id: 1, name: \'鸡肉卷\', price: 10, count: 1, img: \'./img/jiroujuan.jpg\'},
                {id: 1, name: \'炸鸡\', price: 28, count: 1, img: \'./img/zhaji.jpg\'},
                {id: 1, name: \'啤酒\', price: 8, count: 1, img: \'./img/pijiu.jpg\'},
                {id: 1, name: \'可乐\', price: 6, count: 1, img: \'./img/kele.jpg\'},],
            checkGroup:[],
        },
        methods: {
            sumPrice(){
                let totalPrice = 0
                for (i in this.checkGroup){ //迭代循环
                    totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
                }
                return totalPrice
            },
            handleCheckAll(){
                // 选中的长度等于所有商品长度
                if (this.checkGroup.length == this.goods.length){
                    this.checkGroup = [] //说明已经全选了，再点击就置空
                    this.checkAll = false  // 全不选按钮就是不选中状态
                }else {
                    this.checkGroup = this.goods  // 没有全选点击就全选
                    this.checkAll = true // 全选按钮就是就是选中状态
                }
            },
            checkOne(){
                // 选中的长度不等于所有商品长度
                if (this.checkGroup.length != this.goods.length){
                    this.checkAll = false // 全选按钮就是不选中状态
                }else {
                    this.checkAll = true // 否则全选按钮就是选中状态
                }
            }
        },
    })
</script>
</html>

高级-带加减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本购物车计算商品价格</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
    <div class="container-fluid">
        <div class="row">
            <h2 class="text-center">购物车</h2>
            <div class="col-md-6 col-md-offset-3">
                <table class="table table-condensed text-center">
                    <tr>
                        <td class="active">图片</td>
                        <td class="success">名称</td>
                        <td class="info">价格</td>
                        <td class="danger">数量</td>
                        <td class="warning">全选/不全选
                            <1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="checkbox" v-model="checkAll" @1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6="handleCheckAll">
                        </td>
                    </tr>
                    <tr v-for="good in goods">
                        <td class="info"><img :src="good.img" alt="" width="40px" height="30px"></td>
                        <td class="danger">{{good.name}}</td>
                        <td class="warning">{{good.price}}</td>
                        <td class="success">
                            <button @click="good.count++">+</button>
                            {{good.count}}
                            <button @click="subtract(good)">-</button>
                        </td>
                        <td class="active"><1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下4 type="checkbox" v-model="checkGroup" :value="good" @1 前后端混合开发（前端调好页面---》给后端，加模板语言）
2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形
3 Angular框架的出现--js框架：前端工程化
4 React、Vue框架：中国人中小型项目用Vue多，老外用React
5 大前端的概念：
    -网站，ios，安卓，小程序
6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发
    -Dart：语言，java很像
7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）
8 在不久的将来 ，大前端框架可能会一统天下6="checkOne">
                        </td>
                    </tr>
                </table>
                选中的商品：{{checkGroup}}
                <br>
                总价格：{{sumPrice()}}
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: \'#box\',
        data: {
            goods: [
                {id: 1, name: \'汉堡\', price: 16, count: 1, img: \'./img/hanbao.jpg\'},
                {id: 1, name: \'鸡肉卷\', price: 10, count: 1, img: \'./img/jiroujuan.jpg\'},
                {id: 1, name: \'炸鸡\', price: 28, count: 1, img: \'./img/zhaji.jpg\'},
                {id: 1, name: \'啤酒\', price: 8, count: 1, img: \'./img/pijiu.jpg\'},
                {id: 1, name: \'可乐\', price: 6, count: 1, img: \'./img/kele.jpg\'},],
            checkGroup: [],
        },
        methods: {
            sumPrice() {
                let totalPrice = 0
                for (i in this.checkGroup) { //迭代循环
                    totalPrice += this.checkGroup[i].price * this.checkGroup[i].count
                }
                return totalPrice
            },
            handleCheckAll() {
                // 选中的长度等于所有商品长度
                if (this.checkGroup.length == this.goods.length) {
                    this.checkGroup = [] //说明已经全选了，再点击就置空
                    this.checkAll = false  // 全选按钮就是不选中状态
                } else {
                    this.checkGroup = this.goods  // 没有全选点击就全选
                    this.checkAll = true // 全选按钮 
                    就是  280就是选中状态
                }
            },
            checkOne() {
                // 选中的长度不等于所有商品长度
                if (this.checkGroup.length != this.goods.length) {
                    this.checkAll = false // 全选按钮就是不选中状态
                } else {
                    this.checkAll = true // 否则全选按钮就是选中状态
                }
            },
            subtract(good){
                if (good.count == 1){
                    good.count == 1
                }else {
                    good.count--
                }
            }
        }
    })
</script>
</html>

v-model 进阶

v-model 之 lazy、number、trim

lazy：等待1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4框的数据绑定时区焦点之后再变化

number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留

trim：去除首尾的空格

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 class="form-control" type="text" v-model="name" placeholder="native">

</div>

<br>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<label >等待1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4框的数据绑定时区焦点之后再变化:</label>

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 class="form-control" type="text" v-model.lazy="name1" placeholder="lazy">

</div>

<br>

<hr>

<br>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<label >数字开头，只保留数字，后面的字母不保留；字母开头，都保留：</label>

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 class="form-control" type="text" v-model.number="name2" placeholder="number">

</div>

<br>

<hr>

<div class="1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4-group">

<label>去除首尾的空格：</label>

<1 前后端混合开发（前端调好页面---》给后端，加模板语言）

2 ajax：js跟后端交互，js从后端请求数据，js的dom操作渲染页面，前后端分离的雏形

3 Angular框架的出现--js框架：前端工程化

4 React、Vue框架：中国人中小型项目用Vue多，老外用React

5 大前端的概念：

-网站，ios，安卓，小程序

6 谷歌：flutter框架，安卓，ios，无缝运行，桌面开发

-Dart：语言，java很像

7 uni-app:使用vue写---》编译成ios，安卓，网站的（初创型公司）

8 在不久的将来，大前端框架可能会一统天下4 class="form-control" type="text" v-model.trim="name3" placeholder="trim">

</div>

<br>

<hr>

</div>

</body>

var vm = new Vue({

el: \'#box\',

data: {

name1: \'\',

name2: \'\',

name3: \'\',

})

</script>

</html>

宙飒天下网-ZhouSa.com

Vue介绍Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

渐进式框架

网站

版本

Vue特点

易用

灵活

高效

MVVM架构

MVVM介绍

MVVM的特性

单页面开发和组件化开发组件化开发： 类似于DTL中的include，每一个组件的内容都可以被替换和复用 单页面开发： 只需要1个页面，结合组件化开发来替换页面中的内容 页面的切换只是组件的替换，页面还是只有1个index.html

文本指令,事件指令

属性指令

列表渲染(购物车)

v-if+v-for+v-else控制购物车商品的显示

v-for遍历数组(列表)、对象(字典)、数字

过滤案件

事件修饰符

按键修饰符

数据双向绑定

v-model的使用

表单控制

checkbox选中

单选，多选

购物车案例

基础-结算

进阶-全选/全不选

高级-带加减

v-model 进阶

v-model 之 lazy、number、trim

相关阅读

RXThinkCMF 敏捷开发框架 Laravel10.x+Layui 版本 v2.0.0 发布

ModStartCMS v8.1.0 图片前端压缩，抖音授权登录

Solon 开源发布"新"的架构图

建木流水线 SaaS 版已上线，公测免费体验中！！！

发表评论取消回复

还没有评论，来说两句吧...

Vue介绍
Vue (读音 `/vjuː/`，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以`自底向上逐层应用`
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

单页面开发和组件化开发
组件化开发：
类似于DTL中的include，每一个组件的内容都可以被替换和复用

单页面开发：
只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html