10.vue框架

发布日期:2019-01-13

vue框架易用、灵活、高效

https://cn.vuejs.org/

mvc

M model 数据 模型

V view 视图 dom操作

C controller 控制器 路由

C

oBtn.onclick = function(){ $.ajax(... success:function(data){//data M //DOM操作 V } )}

mvc mvvm mvp mv*

http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html


指令

v-开头的自定义属性

v-model 数据v-text 纯文本 简写 {{数据}}v-html 会转义html标签

exp:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="vue.js"></script><script>window.onload = function(){ var vm = new Vue({ el:"#div1" //选择器 data:{ a:"abc" //定义 } })}</script></head><body><div id="div1"> <input v-model="a" type="text" value=""/><br /> <span v-text="a"></span> <br /> <span v-html="a"></span> <br /> {{a}}</div></body></html>

v-text/{{}}区别

{{}} 如果使用过程中出现错误,会显示花括号, v-text不会显

想要不想显示{{}}1、把所有的{{}}——> v-text 不推荐2、v-cloak 需要和样式进行配合外层div设置[v-cloak]{display:none}

网络延迟的问题也会显示 {{}}

如果在使用vue的过程中没有出现错误,vue会把v-cloak给删除

推荐用花括号 {{xxx}}


v-bind 操纵属性

注意: el不能选择body或者html

v-bind:属性名称="值" 简写 :属性名称="值"跟对象:v-bind="对象"


data:{ a:"width:200px heigth:200pxbackground:red"}v-bind:style="a"v-bind:style=""width:200px heigth:200pxbackground:red""jsonv-bind:style="{width:"200px" heigth:"200px"background:"red"}"数组data:{ width:{width:"200px"} heigth:{heigth:"200px"} background:{background:"200px"}}v-bind:style="[widthheightbackground]"


class

data:{ a:"box1 box2 box3"}v-bind:v-bind:box1 box2 box3""

json: 必须跟布尔值

data:{ box1:true box2:false box3:"dsafsa"}v-bind:

数组元素是变量名

data:{ box1:"box1" box2:"box2" box3:"abc"}v-bind:


方法:

methods:{ 方法名(){ }}

事件:

v-on:click="方法名" 简写 @click="方法名"

显示隐藏:

v-show: 控制的是style:none/blockv-if: 控制的真实dom节点的创建和删除


v-if 条件判断

v-ifv-else-ifv-else

exp:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1{width:200px height:200px background:#ccc}</style><script src="vue.js"></script></head><body><div id="app"> <span v-if="a==1">1</span> <span v-else-if="a==2">2</span> <span v-else>其他</span></div><script>var vm = new Vue({ el:"#app" data:{ a:1 } })</script></body></html>


循环:v-for/v-of

数组

v-for="item in arr"v-for="(vk) in arr"v-for="vk in arr"exp:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1{width:200px height:200px background:#ccc}</style><script src="vue.js"></script><script>/*for infor of*/window.onload = function(){ var vm = new Vue({ el:"#app" data:{ arr:["aaa""bbb""ccc"] } })} </script></head><body><div id="app"> <ul> <li v-for="item in arr">{{item}}</li> </ul> <ul> <li v-for="item of arr">{{item}}</li> </ul> </div></body></html>

res:

对象

v-for="item in json"v-for="(vki) in json"v-for="vki in json"

exp:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>#div1{width:200px height:200px background:#ccc}</style><script src="vue.js"></script><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script>/*for infor of*/window.onload = function(){ var vm = new Vue({ el:"#app" data:{ json:{ name:"翠花" age:18 sex:0 } } })} </script></head><body><div id="app"> <ul> <li v-for="item in json">{{item}}</li> </ul> <ul> <li v-for="vki of json">{{v}}----{{k}}----{{i}}</li> </ul> </div></body></html>

res:


数据更新

数组

arr.push/pop/shift/unshift/splice....

直接操纵索引 无效 vm.arr[index] = xxxx

vm.$set(vm.arr/jsonindex/keyvalue)Vue.set(vm.arr/jsonindex/keyvalue)

vm.arr[index] = xxxx 无效强制更新:vm.$forceUpdate()

对象

必须先定义 再修改!


事件对象

@click="函数名" 事件函数的第一个参数就是事件对象ev@click="函数名($event)" 在函数里面可以直接使用ev

exp:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="vue.js"></script><script>window.onload = function(){ var vm = new Vue({ el:"#app" data:{} methods:{ show(ev){ alert(ev.clientX) } } })}</script></head><body><div id="app"> <input @click="show($event)" type="button" value="按钮" /></div></body></html>

原生

onclick="show(event)"


冒泡:

子元素的事件可以传播到父元素上,最终传播到document

var oEvent = ev || eventoEvent.cancelBubble = trueoEvent.stopPropagation()

vue阻止事件冒泡:

@click.stop="btn"

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="vue.js"></script><script>window.onload = function(){ var vm = new Vue({ el:"#app" data:{} methods:{ div(){ alert("div") } btn(){ //var oEvent = ev || event //oEvent.cancelBubble = true //oEvent.stopPropagation() alert("btn") } } }) }</script></head><body><div id="app"> <div id="div1" @click="div" > div1 <input @click.stop="btn" type="button" value="按钮" /> </div></div></body></html>

默认事件

浏览器自带的行为就是默认事件

原生:ev.preventDefault()//return falsevue:(原生和.prevent都可以)@click.prevent="show"

vue阻止默认事件:

@click.prevent="show"

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="vue.js"></script><script>window.onload = function(){ var vm = new Vue({ el:"#app" data:{} methods:{ show(ev){ alert(1) //ev.preventDefault() //return false } } }) }</script></head><body><div id="app"><!--vue阻止默认事件--> <a @click.prevent="show" href="http://www.baidu.com/">百度</a></div></body></html>

事件修饰符:

https://cn.vuejs.org/v2/guide/events.html

exp:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="vue.js"></script><script>Vue.config.keyCodes.enter = 37将将回车设成37window.onload = function(){ var vm = new Vue({ el:"#app" data:{} methods:{ left(){ alert("left") } right(){ alert("right") } } }) }</script></head><body><div id="app"> <!-- @click.left鼠标左键 @click.right鼠标右键 @click.right.prevent阻止右键默认事件 --> <input @click.left="left" type="button" value="left" /> <input @click.right.prevent="right" type="button" value="right" /> </div></body></html>


模板:template

==模板里面只能有一个根节点,不能有兄弟节点==

new Vue({ template:" 选择器"、oTmp})<div id="tmp" style="display:none"> 模板内容</div><template id="tmp" > 模板内容</template>type="text/x-template" type="x-template" <script id="tmp" type="text/x-template" > 模板内容</script>


生命周期 【created/mounted】/updated/destroyed

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

8 个函数

1、初始化

vm.beforeCreate 没有 $el/$datavm.created 没有 $el 有 $data

2、挂载

vm.beforeMount 有 $el 原始dom 有 $datavm.mounted 有 $el 虚拟dom 有 $data

3、数据更新

vm.beforeUpdatevm.updated

4、销毁

vm.beforeDestroyvm.destroyed

生命周期图示

下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。

exp:

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script src="vue.js"></script></head><body><div id="app"> </div><script>var vm = new Vue({ //el:"#app" data:{a:12b:5} template:`<span> {{a}}---{{b}}</span>` beforeCreate(){// undefined undefined console.log("beforeCreate"this.$elthis.$data) } created(){//undefined {数据} console.log("created"this.$elthis.$data) } beforeMount(){ //原始dom {数据} console.log("beforeMount"this.$elthis.$data) } mounted(){//虚拟dom {数据} console.log("mounted"this.$elthis.$data) } //vm.a = xxxx beforeUpdate(){ console.log("beforeUpdate") } updated(){ console.log("updated") } ////vm.$destroy() beforeDestroy(){ console.log("beforeDestroy") } destroyed(){ console.log("destroyed") }})vm.$mount("#app")</script></body></html> 1 0 9)