Vue入门

入门简介

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模板语法

(一). 指令（自定义属性）

1. v_cloak（解决闪动问题）:
   用法：

   [v_cloak]{
    	display:none
    }
   

   在插值表达式所在的标签中添加V_cloak指令

2. v-text：
   用法:

    <div v-text="msg"></div>//msg是数据模型
   

3. v-html（将带有html标签的，文本进行转义）：
   用法：

    	<div v-html="mas1"></div>
   

4. v-pre：
   显示原始信息，vue不对它行编译
   用法：

    	<div v-pre="mas1"></div>
   

5. v-once:
   只编译一次,显示之后就不在进行编译
   用法：

   <div v-once></div>
   

   应用场景：如果显示的信息后需不需要修改，可以使用v-once,这样可以提高性能。

6. v-model（双向数据绑定）
   用法：

   <input type="text" v-model="msg"/>
   

   更改文本框中的值msg的值也会改变

7. 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
   

8. .事件修饰符（stop；.prevent），更多见官网
   用法：
   （1）第一种方法
   
   （2）第二种方法

   //通过对象
   e.stopPropagetion()阻止冒泡
   e.preventDefault()阻止冒泡
   

9. 按键修饰符（.enter；.delete），更多见官网
   用法:

   v-on:keyup.enter="handle3()"
   v-on:keyup.delete="handle4()"
   

10. 自定义按键修饰符
    用法：

//定义语法
//f1是名称，课任意取
Vue.config.keyCodes.f1=112

//调用语法
//f1是上面的名称
 v-on:keyup.f1="handle5"

---

简单计算器注意事项：
bash 需要字符串转为int ，可用parseInt()函数将字符串转为int。 需要字符串转为float ，可用parseFloat()函数将字符串转为float。

1. 分支
   v-if、v-else-if、v-else用法：
   
   v-show用法：
   
   flag为true时显示，反之不显示。
   注意：
渲染出来变化较小用v-if,控制样式用v-show。
2. 循环语法
   v-for用法
   
   list的定义
   
   遍历list：
   
   13.key
   只要做遍历就应该加上 ：kye='item.id，目的是提高性能