Vue.js基础语法

Vue实例

• Vue实例是通过Vue函数创建的对象，是使用Vue功能的基础

el选项

• 用于选取一个DOM元素作为Vue实例的挂载目标
• 只有挂载元素内部才会被Vue进行处理，外部为普通HTML元素
• el选项代表了MVVM中的View层
• 可以为CSS选择器格式的字符串，或HTML Element实例，但不能为html或body
• 挂载完毕后，可以通过vm.$el进行访问
• 未设置el的Vue实例，也可以通过vm.$mount()进行挂载，参数形式与el规则相同
  我们来举个例子：

var vm = new Vue({});
vm.$mount('#app');

插值表达式

• 插值表达式只能书写在标签内容区域，可以与其他内容混合
• 内部只能书写JavaScript表达式，不能书写语句

data选项

• 用于存储Vue实例需要使用的数据，值为对象类型
• data中的数据可以通过vm.$data.数据或者vm.数据访问
• data中的数据为响应式数据，在发生改变时，视图会自动更新
• data中存在数组时，索引操作与length操作无法自动更新视图，这时我们可以借助Vue.set()方法替代操作
  我们来举个例子：

var vm = new Vue({
el:'#app',
data:{
contentArr:['内容1','内容2','内容3']
}
);
Vue.set(vm.contentArr,0,'生效的新内容1');

这样我们就可以直接操作data中的数组contentArr中的数据，记住，是Vue.set()!!!

methods选项

• 用于存储需要在Vue实例中使用的函数
• methods中的方法可以通过vm.方法名访问
• 方法中的this为vm实例，可以便捷地访问vm等数据
  示例代码：

var vm = new Vue({
	el:'#app',
	data:{
		title:'标题',
		content:'内容'
	},
	methods:{
		output(){
			console.log(this.title,this.content);
			}
	}
	});
	

今天就先码到这，明天我们复习指令了。今日份推荐歌曲：孤矢/Nanyee阿楠-太空漫游