入门简介
Vue官方API
要使用vue 需要引入vue.js
<script type="text/javascript" src="js/vau.js"></script>
页面使用:
<div id="app">
{{msg}}
</div>
vue使用语法:
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'信息’
}
});
</script>
el:元素的挂载位置(值可以是CSS选择器或者DOM元素)
data:模型数据(值是一个对象)
vue模板语法
(一). 指令(自定义属性)
-
v_cloak(解决闪动问题):
用法:[v_cloak]{ display:none }
在插值表达式所在的标签中添加V_cloak指令
-
v-text:
用法:<div v-text="msg"></div>//msg是数据模型
-
v-html(将带有html标签的,文本进行转义):
用法:<div v-html="mas1"></div>
-
v-pre:
显示原始信息,vue不对它行编译
用法:<div v-pre="mas1"></div>
-
v-once:
只编译一次,显示之后就不在进行编译
用法:<div v-once></div>
应用场景:如果显示的信息后需不需要修改,可以使用v-once,这样可以提高性能。
-
v-model(双向数据绑定)
用法:<input type="text" v-model="msg"/>
更改文本框中的值msg的值也会改变
-
v-on(事件绑定)
v-on的两种语法:第一种方式:<button v-on:click='num++'>sdfa</button> 第二种方式:<button @click='num++'>sdfa</button>
事件函数调用
创建函数:
函数调用的两种方式(有参数必须使用第二种):第一种方式:<button @click='handle'>2</button> 第二种方式:<button @click='handle()'>3</button>
带参函数及event对象注意事项:
<button @click='handle1'>点击1</button> <button v-on:click='handle2(123,456,$event)'>点击2</button>
methods:{ handle1:function(e){ console.log(e.target.innerHTML)//获取按钮上的内容 console.log(e.target.tagName)//获取标签的名称 this.num++; }, handle2:function(a,b,e){ console.log(e.target.innerHTML)//获取标签上的内容 console.log(a+"comebaby"+b)//获取标签的名称 this.num++; } }
(1)如果事件直接绑定函数名称(不带括号),默认会传递事件对象作为函数的第一个参数。 (2)如果事件绑定函数调用(有参),必须作为最后一个参数显示传递,并且事件对象的名称是固定的$event
-
.事件修饰符(stop;.prevent),更多见官网
用法:
(1)第一种方法
(2)第二种方法//通过对象 e.stopPropagetion()阻止冒泡 e.preventDefault()阻止冒泡
-
按键修饰符(.enter;.delete),更多见官网
用法:v-on:keyup.enter="handle3()" v-on:keyup.delete="handle4()"
-
自定义按键修饰符
用法:
//定义语法
//f1是名称,课任意取
Vue.config.keyCodes.f1=112
//调用语法
//f1是上面的名称
v-on:keyup.f1="handle5"
简单计算器注意事项:
bash 需要字符串转为int ,可用parseInt()函数将字符串转为int。 需要字符串转为float ,可用parseFloat()函数将字符串转为float。
- 分支
v-if、v-else-if、v-else用法:
v-show用法:
flag为true时显示,反之不显示。
注意:
渲染出来变化较小用v-if,控制样式用v-show。
- 循环语法
v-for用法
list的定义
遍历list:
13.key
只要做遍历就应该加上:kye='item.id
,目的是提高性能