Vue实例与渲染

1 Vue框架

1.1 vue与jQuery区别

• jQuery仍然是操做DOM的思想，jQuery主要用来写页面特效
• Vue是前端框架(MVVM)，对项目进行分层。处理数据

1.2 前端框架

• angular google
• react facebook
• vue 全世界，社区维护

1.3 单页面应用

1.4 MVVM

• M模型层 Model
• V视图层 View
• VM(控制层)VIEW-MODEL

2 VUE实例

let app = new Vue({ el:'#app', //挂载元素 data:{ //数据 属性名:值 }, methods:{ 属性名:function(){ } //方法 }, computed:{ 属性名:function(){ } //计算属性 被动 别人改--本身改 }, watch:{ 属性名:function(){ } //监听属性 主动 本身改--别人改 }, //生命周期的钩子函数 beforeCreate:function(){ //实例刚建立时，只有this,但没有任何属性 }, created:function(){ //方法属性等都已经建立，能够在这里获取后端数据 }, beforeMount:function(){ //挂载完成前 }, mounted:function(){ //挂载完成，DOM操做写在这，可是建议不使用DOM }, beforeUpdate:function(){ //数据更新前 }, upeated:function(){ //数据更新完成 }, //不多用 <!--activated--> <!--deactivated--> <!--beforeDestory--> <!--destoryed--> }) 注：function中调用属性须要用this.属性名 

3 Vue视图

3.1 基本模块语法

文本插值

{{ title }}
<p v-text='title'></p>
<p v-once>{{ title }}</p>  值一经设置不能改动 

HTML

<div v-html='message'></div> 

绑定属性

<img v-bind:scr='imgSrc' v-bind:title='title'> 缩写： <img :scr='imgSrc' :title='title'> 

防止闪烁

<style> [v-cloak] { display:none !important } </style> <div id='app' v-cloak> 

3.2 指令

* v-text * v-html * v-show * v-if * v-else-if * v-else * v-for * v-on 缩写 @事件 * v-bind 缩写 :属性 * v-model * v-pre * v-cloak * v-once 

3.3 条件渲染

v-if v-else-if v-else true时显示,false时什么都没 v-show v-show控制隐藏和显示(改变display) 

3.4 列表渲染

v-for 例子:<li v-for="(item,index) in itemList"> {{index}} {{item}} </li>