vue的介绍和基本使用
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
最重要的是Vue是MVVM框架！！！
它是渐进式框架，它是初创公司的首选框架，它是轻量级的，有很多根据Vue拓展的独立的功能或库。
https://github.com/vuejs Github网站
https://vuejs.org/ vue网站
首先引入一个关于数据驱动的问题
原生的JavaScript代码
1 <h1>0</h1> 2 <button>按我加一</button> 3 <script> 4 var h1 = document.getElementsByTagName("h1")[0]; 5 var btn1 = document.getElementsByTagName("button")[0]; 6 var num=0; 7 btn1.onclick=function(){ 8 num++; 9 //重新渲染视图 10 h1.innerHTML=num 11 }; 12 </script>
此时可以看到浏览器中加载并渲染成功
若是再来一个
1 <h1>0</h1> 2 <button>按我加一</button> 3 <button id="btn">按我减一</button> 4 <script> 5 var h1 = document.getElementsByTagName("h1")[0]; 6 var btn1 = document.getElementsByTagName("button")[0]; 7 var btn2 = document.getElementById("btn"); 8 var num=0; 9 btn1.onclick=function(){ 10 num++; 11 //重新渲染视图 12 h1.innerHTML=num 13 }; 14 btn2.onclick=function(){ 15 num--; 16 console.log(num) 17 } 18 </script>
可以看到当按下“按我减一”的时候视图并没有渲染，打开network面板可以看到数据已经实现减一操作
这是因为我们没有加入h1.innerHTML=num这行代码，所以页面没有更新渲染，如果内容多了，势必会造成代码冗余
接下来看vue的数据驱动视图
首先引用vue的源码
采用生产环境的代码
1 <div id="app"> 2 <h1 > 3 <!-- 渲染a的属性 --> 4 {{a}} 5 </h1> 6 <button @click="add">按我加一</button> 7 <button @click="minus">按我减一</button> 8 </div> 9 <script src="./js/vue.js"></script> 10 <script> 11 new Vue({ 12 // 挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用 13 el:"#app", 14 // 数据管理中心，所有的Vue的数据都在data对象中 15 data:{ 16 a:0 17 }, 18 // 方法，对应的Vue事件方法清单 19 methods:{ 20 add(){ 21 this.a++ 22 }, 23 minus(){ 24 this.a-- 25 } 26 } 27 }) 28 </script>
此时可以看到页面正常加载，不需要在添加渲染视图部分，因为vue 的核心库只关注视图层，会自动渲染我们看到的视图
我们看一下vue的基本使用
1 <div id="app"> 2 {{a}} 3 </div> 4 <div> 5 {{a}} 6 </div> 7 8 <script src="./js/vue.js"></script> 9 <script> 10 var vue=new Vue({ 11 //一般以id属性为挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用 12 el:"#app", 13 // 数据管理中心，所有的Vue的数据都在data对象中 14 data:{ 15 a:100 16 }, 17 // 方法，对应的Vue事件方法清单 18 methods: { 19 20 }, 21 }) 22 23 </script>
此时我们看到页面为
是因为所有的Vue的方法和属性都必须在对应的挂载根标签内部使用，即使有{{a}}，也不是渲染a的属性值。
1 <div id="app"> 2 {{a}} 3 {{b}} 4 </div> 5 <script src="./js/vue.js"></script> 6 <script> 7 var vue=new Vue({ 8 //一般以id属性为挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用 9 el:"#app", 10 // 数据管理中心，所有的Vue的数据都在data对象中 11 data:{ 12 a:100 13 }, 14 content:{ 15 b:200 16 }, 17 // 方法，对应的Vue事件方法清单 18 methods: { 19 20 }, 21 22 }) 23 24 </script>
当然了，在这里我们自定义的也是不可以的。
我们需要注意，所有的对象中的清单内容，都是Vue规定，内置的，不可以自由发挥。
此时页面会报错
我们在上面的代码中可以看到有个{{a}}，这是vue的插值语法，通过一对{{}}进行书写，内部是对data数据管理中心的属性进行渲染，也可以是表达式。moustache（胡子）是双大括号学名，也叫（胡子语法）。
“{{}}”内部可以放简单简单的表达式。比如三元运算符。
1 <div id="app"> 2 {{a >= 100 ? 20 : 10}} 3 </div> 4 <script src="./js/vue.js"></script> 5 <script> 6 var vue=new Vue({ 7 //一般以id属性为挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用 8 el:"#app", 9 // 数据管理中心，所有的Vue的数据都在data对象中 10 data:{ 11 a:100 12 }, 13 // 方法，对应的Vue事件方法清单 14 methods: { 15 16 }, 17 }) 18 </script>
这里我们可以看到结果为
但是不可以使用if等之类的复杂判断。
1 <div id="app"> 2 {{ 3 if(a>100){ 4 a=100 5 }else{ 6 a=20 7 } 8 }} 9 </div>
此时我们可以看到页面并无加载，也没有报错，无法识别而没有做出任何输出
