vue介绍
1、什么是vue.js
是一套用于构建用户界面的渐进式框架。vue的设计可以自底层向上逐层应用。vue的核心库只关注视图层。可以为单页面应用提供驱动。
2、起步
下载vue.js jar包，引入页面进行运用。
不推荐直接使用vue-cli，尤其在不熟悉node.js的构建工具的时候。
3、声明式渲染
vue的核心就是使用简单的模板语言声明式的将数据渲染进DOM的系统。
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> {{message}} </div> <script> var vm = new Vue({ el:'#app', data:{ message:'hello vue.js' } }) </script> </body> </html>
效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-irI0u7La-1604128329147)(E:\政通路\课堂笔记\S3\vue英豪\vue\vue入门\assets\image-20200827155250678.png)]
我们创建了第一个vue应用。使数据和DOM建立了联系。
<div id="app2"> <span v-bind:title="msg">提示信息</span> </div> var app2 = new Vue({ el:'#app2', data:{ msg:'页面提示'+new Date().toLocaleString() } })
v-bind特性称之为指令。带有v-，表示是vue提供的特殊特性。将元素节点的title特性和msg属性进行了一致性的保持。
4、条件与循环
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-71DAjMs7-1604128329150)(C:\Users\ADMINI~1\AppData\Local\Temp\1563870314654.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e36IR8Gm-1604128329152)(C:\Users\ADMINI~1\AppData\Local\Temp\1563870325182.png)]
发现在控制台输app3.seen=false，会发现之前的“你好”，消失了
vue提供了一个强大过渡效果系统，可以在vue插入/更新/删除元素时，自动的过度应用效果
v-for指令绑定数组的数据渲染一个项目列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7CAtgC40-1604128329156)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871037825.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZXjlJivV-1604128329157)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871050641.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DP5TzkHK-1604128329161)(C:\Users\ADMINI~1\AppData\Local\Temp\1563871080828.png)]
在控制台输入app4.todos.push({text:‘maven’})，他会在列表后面添加一个新项目
5、处理用户输入
为了让用户和你的应用进行交互，可以用v-on指令添加一个事件监听器，通过它调用vue实例中定义的方法
<!--v-on指令--> <div id="app5"> <p>{{mm}}</p> <button v-on:click="reversemm">翻转消息</button> </div> var app5 = new Vue({ el:'#app5', data:{ mm:'abcdefg' }, methods:{ reversemm:function(){ this.mm = this.mm.split('').reverse().join('') } } })
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Aj7O77wu-1604128329165)(C:\Users\ADMINI~1\AppData\Local\Temp\1563872080347.png)]
vue提供v-model指令，实现双向绑定
使用v-model实现表单输入和应用状态之间的双向绑定
<!--v-model双向绑定--> <div id="app6"> <p>{{msm}}</p> <input v-model="msm" /> </div> var app6 = new Vue({ el:'#app6', data:{ msm:'abcdefg' } })
6、组件化应用构建
组件系统是vue的另一个重要的概念。它是一种抽象的，允许我们使用小型、独立和通常可以复用的组件构建大型的项目。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fGJYjvEu-1604128329168)(C:\Users\ADMINI~1\AppData\Local\Temp\1563935364848.png)]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="app"> <ol> <li>我是li标签</li> <todo-item></todo-item> </ol> </div> <script> //定义 todo-itme 是一个组件 Vue.component('todo-item',{ template:'<li>我是一个组件元素</li>' }) new Vue({ el:'#app', data:{ } }) </script> </body> </html>
本章回顾：
1、vue.js是一个渐进式的框架
2、下载vue.js的jar，引入页面
3、数据的加载 语法：｛｛变量名｝｝，new一个事例 el 和 data
4、指令 以v-开头，这是vue的特殊命令
5、组件化构建，什么是组件
作业：
1、下载vue.js,引入
</body>
```
本章回顾：
1、vue.js是一个渐进式的框架
2、下载vue.js的jar，引入页面
3、数据的加载 语法：｛｛变量名｝｝，new一个事例 el 和 data
4、指令 以v-开头，这是vue的特殊命令
5、组件化构建，什么是组件
作业：
1、下载vue.js,引入
2、把这章讲到的知识点，熟练运用，结合官方API
