Vue学习笔记
1、 vue是什么？
Vue是一套用于构建用户界面的渐进式框架（渐进式框架：分层设计，即你需要使用一种框架或者工具的时候，引入即可使用他的大部分功能，需要使用其他功能的时候只需要添加相应功能插件【做加法】，类似于Jquery，由简单到复杂，优点：节省成本https://www.zhihu.com/question/51907207）。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心层只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
2、 Hello Vue！搭建一个Vue框架；
1> 定义View
2> 定义Model
3> 创建一个Vue实例或"ViewModel"，它用于连接View和Model
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', name: 'Hello Vue!' }, // template: '<h1 style="color:red">我是选项模板2<br />{{ name }}</h1>', // template: '#demo3', /* el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子 * 可以简单的理解为：就是渲染dom节点的时候使用 * vue加载完成后回调函数 * 运行AJAX事件请求数据 */ mounted: function () { //延迟回调 this.$nextTick(function () { // $("#message").val("Hello Vue,I am message!"); // $("#name").val("Hello Vue,I am name!"); app.$data.message = "Hello Vue,I am message!"; app.$data.name = "Hello Vue,I am name!"; // alert(app.$data.name); var i = 0; var interIndex = setInterval(function(){ app.$data.name = (i++) + 1; }, 1000); }); //app.$data.name = "Hello World1!";//会报错：app对象不存在 // alert($("#temp").is(':hidden')); }, methods: {//自定义方法 } })
3、 数据驱动？
Vue是数据驱动的，那什么叫做数据驱动，举个例子，我们电脑装了一个显卡，电脑是怎么控制的呢，就是因为驱动，电脑通过显卡驱动控制显卡，同理，vue相当于驱动，元素相当于显卡，我们不直接操作元素，我们只需要操作vue实例用以操作元素，比如我们需要给一个id为tem的dom元素赋值，Jquery的做法是$(“#tem”).val(‘aaa’)，直接操作元素用以赋值，而vue的做法是它会创建一个实例直接将数据与dom进行绑定，数据与dom元素将保持同步，当数据变更，dom也会随之更新；（dom元素随数据改变而改变，那数据会不会随dom元素改变而改变。这单向绑定，还是双向绑定？）引出MVVM模式
4、 MVVM模式（Model-View-ViewModel）
扫描二维码关注公众号，回复：
4952251 查看本文章
MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
当创建了ViewModel后，双向绑定是如何达成的呢？
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
5、 生命周期
6、 常用指令
v-if指令
年龄：<span v-if="age > 20">{{ age }}</span> <span v-else-if="age > 18">{{ age+"(未成年)" }}</span> <span v-else>{{ age+"(小孩)" }}</span><br />
v-show指令
<!-- v-if 直接删除元素; v-show 修改style属性：display:none; --> 性别：<span v-show="sex=='男'||sex=='女'">{{ sex }}</span><br />
v-for指令
<table> <tr> <th>姓名</th> <th>性别</th> <th>性别（我是简写）</th> <th>年龄</th> </tr>
<!-- temp 1 --> <tr v-for="emp in employees"> <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td> <td v-bind:id="'td'+emp.name" v-else>{{ emp.name+"(缺某)" }}</td> <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <!-- b-bind:attrbute="" 简写 :bind:attrbute="" --> <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <td v-if="emp.age>20">{{ emp.age }}</td> </tr>
<!-- temp 2 -->
<tr v-for="(emp, index) in employees">
<td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
<td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
<td v-if="emp.age>20">{{ emp.age }}</td>
</tr> </table>
v-bind指令
<td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <!-- b-bind:attrbute="" 简写 :bind:attrbute="" --> <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
v-on指令
<button type="button" v-on:click="remove">删除</button> <!-- b-on:click="" 简写 @click="" --> <button type="button" @click="remove">删除（我是简写）</button
<button v-on:click="removeByIndex(index)">删除</button>
7、写一个Demo
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础的VUE介绍</title> <link rel="stylesheet" href="../assets/css/index.css"> <style type="text/css"> html, body {width: 100%;} #app {width: 95%; margin: auto;} #app table {border-collapse: collapse;} #app table th,td {width: 200px; border: 1px #ccc solid; text-align: center;} #app .boy {background: blue;} #app .girl {background: red;} </style> </head> <body> <div id="app"> <h1>v-if/v-else/v-show</h1> 姓名：<span v-if="name.indexOf('某') >= 0">{{ name }}</span> <span v-else="name.indexOf('某') < 0">{{ name+"(缺某)" }}</span><br /> 年龄：<span v-if="age > 20">{{ age }}</span> <span v-else-if="age > 18">{{ age+"(未成年)" }}</span> <span v-else>{{ age+"(小孩)" }}</span><br /> <!-- v-if 直接删除元素; v-show 修改style属性：display:none; --> 性别：<span v-show="sex=='男'||sex=='女'">{{ sex }}</span><br /> <hr /><h1>v-on/v-model</h1> 姓名：<input type="text" id="name" v-model="name" /> <br /> 性别：<input type="radio" name="sex" value="男" v-model="sex" /> 男 <input type="radio" name="sex" value="女" v-model="sex" /> 女 <br /> 年龄：<input type="text" id="age" v-model="age" /><br /> <input type="button" value="添加" @click="save"/> <hr /><h1>v-for(1)</h1> <table> <tr> <th>姓名</th> <th>性别</th> <th>性别（我是简写）</th> <th>年龄</th> </tr> <tr v-for="emp in employees"> <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td> <td v-bind:id="'td'+emp.name" v-else>{{ emp.name+"(缺某)" }}</td> <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <!-- b-bind:attrbute="" 简写 :bind:attrbute="" --> <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <td v-if="emp.age>20">{{ emp.age }}</td> </tr> </table> <hr /><h1>v-on</h1> <button type="button" v-on:click="remove">删除</button> <!-- b-on:click="" 简写 @click="" --> <button type="button" @click="remove">删除（我是简写）</button> <hr /><h1>v-for(2)</h1> <table> <tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>操作</th> </tr> <tr v-for="(emp, index) in employees"> <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td> <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <td v-if="emp.age>20">{{ emp.age }}</td> <td><button v-on:click="removeByIndex(index)">删除</button></td> </tr> </table> </div> <div style="height: 200px; width: 100%; text-align: center; margin-top: 200px;"><h1>看不见我，看不见我，看不见我</h1></div> </body> <script type="text/javascript" src="../assets/js/vue/dist/vue.js"></script> <script type="text/javascript" src="../assets/js/jquery.js"></script> <script type="text/javascript" src="index.js"></script> </html>
JS（index.js）
var app = new Vue({ el: '#app', data: { name: '金某某', age: 24, sex: '男', employees: [{ name: '金某某1', age: 24, sex: '男', },{ name: '金某某2', age: 21, sex: '女', },{ name: '金某某3', age: 23, sex: '男', }] }, mounted: function () { //延迟回调 this.$nextTick(function () { }); Array.prototype.deleteByIndex = function(delIndex){ var temArray=[]; for(var i=0;i<this.length;i++){ if(i!=delIndex){ temArray.push(this[i]); } } return temArray; } }, methods: {//自定义方法 remove: function(){ if(app.$data.employees.length > 0) app.$data.employees = app.$data.employees.deleteByIndex(app.$data.employees.length - 1); else alert("列表被被删完了 :(") }, removeByIndex: function(index){ app.$data.employees = app.$data.employees.deleteByIndex(index); }, save: function(){ var emp = {}; emp.name = app.$data.name; emp.age = app.$data.age; emp.sex = app.$data.sex; app.$data.employees.push(emp); } } })
敬谢：
https://www.cnblogs.com/rik28/p/6024425.html
https://cn.vuejs.org/v2/guide/
Vue.js
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>