vue基础语法

vue特点

• 易用：Html+css+JavaScript 比较容易
• 灵活：层分离 设计模式mvc（module view controller） mvvm
• 高效：集成框架的库比较小 代码比较清楚 （可以直接操作dom）

vue环境的安装

• 直接在页面里面引入文件 script标签
• Npm安装 直接在cmd命令里面安装或者在gitbash里面安装

vue基本语法

• 首先创建vue单页面应用程序

<script src="./js/vue.js"></script>  
//创建应用从创建vue的实例开始写
new Vue({

});

• 数据访问：
  只要vue实例里面的数据属性中发生变化 就会去自动更新view
  Vue原则：数据的双向绑定
• 数据对比

var data={
	a:1
}
var vue=new Vue({
	data:data //这个属性是vue对象自带属性（写数据或者定义变量）
})；
console.log(vue.a===data.a);
//数据的更新
/* vue.a=2;
console.log(data.a);*/
//更新上边属性
data.a=2;
console.log(vue.a);

Data属性里面的声明方式

new Vue({
	data:{
		//定义变量
		a:10,
		arr:[],
		str:"123"
	}
});

vue和页面元素关联

vue对象有默认属性 el：“选择器”

new Vue({
	//将vue程序和页面元素进行关联
	el:"#b",
	data:{
		//定义变量
		a:10,
		arr:[],
		str:"123",
		stu:null
	}
});

内置属性watch

监听 内外部写法

var vm=new Vue({
	el:".b",
	data:{
		str:"abc"
	},
	watch:{
		//监听属性的变化
		str:function (newV,oldV){
			//这个回调将在'vm.str' 改变后调用
		}
	}
})；
//true
vm.$el===document.getElementsByClassName("b")[0];
vm.$watch("str",function (nValue,oValue){
	//这个回调将在'vm.str' 改变后调用
})

生命周期钩子函数

created:function(){}

new Vue({
	el:".b",
	created:function(){
		//生命周期钩子函数  在vue被创建实例化之后开始执行
		console.log("created");
	},
	data:{},
	watch:{

	}
});

生命周期函数

mounted(el元素绑定时执行)
Updated（在view视图层更新时执行）

new Vue({
	el:".b",
	created:function(){
		//生命周期钩子函数 在vue被创建实例化之后开始执行
		console.log("created");
	},
	mounted:function(){
		//当el元素更新之后直接开始执行
		console.log("mounted");
	},
	updated:function(){
		//当view视图层发生更新  开始执行
		console.log("updated");
	},
	data:{
		a:10
	},
	watch:{
		
	}
});

模板语法

• 插值语法 （表达式 {{ }} )

<div class="b">
	<!--模块绑定语法-->
	<span>{{str}}</span>
</div>
<script>
	new Vue({
		el:".b",
		data:{
			str:"abc"
		}
	});
</script>

v-once指令 让数据绑定一次性 会影响当前节点的其他数据绑定
{{ }}和v-html区别：表达式直接绑定的是文本，v-html绑定的是html

特性（给元素的属性动态绑定值）

v-bind 可以省略为：属性名称：class

语法

• V-if 如果 v-else
• V-on 指令 监听dom元素的事件 v-on：click=“” ；事件的修饰符：stop 和prevent ；事件v-on指令可以缩写 ：@click=“”
• V-for 重复元素指令
• vue实例对象里面两个属性 methods（生命方法） computed（计算机属性）
  注意：这两个属性里面的声明的方法在页面上使用，还有方法的传参
• v-show 显示隐藏指令 值为true false
• 组件的注册 components两种注册方式：全局注册+局部注册
• 自定义指令 directive 全局注册+局部注册
• 过滤器 对数据进行过滤 里面写的是逻辑代码
  全局注册+局部注册 特殊的：v-for不能直接使用过滤器得借助methods里面的方法来间接使用
• 路由 location 根据location的路径来跳转页面vue-router组件
• http请求 vue-resource组件

补充
vue环境安装
1.安装nodejs平台
2.安装淘宝镜像
npm install -g cnpm --registry= https://registry.npm.taobao.org
3.安装（webpack）环境
4.安装vue-cli
5.创建vue项目
6.运行项目