vue初学总结(一:基础语法)

vue学习总结:

引入vue:
<script src="node_modles/vue/dist/vue.js">

{{}}: 插值表达式,简单理解用来获取vue中定义的属性值并渲染,可以接受一个js表达式,但是必须有结果返回
{{}}: 当网速较慢时,会产生插值闪烁,所以可以使用v-text和v-html来代替
v-text: 将所有数据当做字符串输出 ** 当没有数据时,会显示空白
v-html: 如果要输出的数据中含有html代码,会直接渲染 ** 当没有数据时,会显示空白
v-model: 双向绑定,视图中的操作会影响vue中的属性,vue中的属性也会影响视图的渲染

vue应用都是从创建vue对象开始
// 对象中接受各种参数,方法
var app = new Vue({
	// 你要操作的元素节点
	el:"元素的id", 
	// vue实例创建的时候,会获取data中定义的所有属性来渲染页面
	// 并且会见识属性的变化,当属性变化时,会同步渲染页面中的属性
	// 需要注意,如果一个属性没有在Vue初始化的时候定义,那么该变量的改变并不会渲染在页面上
	data: {
		// data 是一个对象,用来接受定义的各种变属性
		name: "feng",
		age: 28
	},
	// vue中自定义的方法都会在methods对象中
	methods: {
		add: function(){
			// this代表当前实例
			this.age++;
		}
	}
	// 钩子函数: 在vue的各个生命周期中调用的方法
	// 初始化方法
	beforeCreated: function(){
	
	},
	// 创建对象后调用,一般使用这个方法
	created: function(){
	
	}
	// 页面渲染完成后要执行的方法
	mounted: function(){
		
	}
	// 销毁实例前调用
	beforeDestroy: function(){
		
	}	
});