Vue入门笔记（一）

Vue入门笔记（一）

实例与数据

通过构造函数 Vue 就可以创建一个 Vue 的根实例如下代码

var app =new Vue({ 
	el:document.getElementByld ( 'app '), ／／或者是 "＃app " 
	data: {
		a:2
	}
}) 

• 变量 app 就代表了这个 Vue 实例
• el: 用于指定一个页面中己存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 css 选择器如上图代码。
• data 选项，可以声明应用内需要双向绑定的数据（建议所有会用到的数据都 预先在 data 内声明）。
• 除了显式地声明数据外，也可以指向一个己有的变量，并且它们之间默认建立了双向绑定。

var myData = { 
	a: 1 
}
var app =new Vue({ 
	el :'#app', 
	data: myData 
}) 
console.log(app.a) ;//1
//修改属性，原数据也会随之修改
app.a = 2 ; 
console.log(myData.a); // 2 
//反之，修改原数据， Vue 属性也会修改
myData.a = 3 ; 
console.log (app. a) ; // 3 

生命周期

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子， 我们可以利用这些钩子，在合适的时机执行我们的业务逻辑。

• 类似于jQuery中的$ (document) . ready (function() { //DOM 加载完后，会执行这里的代码 )}
• 也和JavaScript中的window.onload = function(){///DOM 加载完后，会执行这里的代码 }

1. Vue常用钩子(暂时自己也没有理解清楚先放上通解)

• created： 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。 需要初始化处理一些数据时会比较有用。
• mounted： el 挂载到实例上后调用。
• beforeDestroy ：实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

2. 钩子与 el 和 data 类似，也是作为选项写入 Vue 实例内，并且钩子的 this 指向的是调用它 的 Vue 实例：

var app = new Vue({ el :"#app ", 
	data: { 
 		a: 2 
	},
	created: function () { 
		console . log (this. a); //2 
	},
	mounted: function () { console .log (this ．$el); // <div id="app" ></div> 
	}
})

插值与表达式

使用双大括号（Mustache 语法）"{{   }}"是最基本的文本插值方法，它会自动将我们双向绑 定的数据实时显示出来如下代码

<div id="app"> 
	{{value}} 
</div>
<script> 
var app =new Vue({ 
	el:"#app ", 
	data: { 
		value :"csdn"
	}
}) //html页面中将会显示csdn
</script> 

通过任何方法修改数据 book，大括号的内容都 会被实时替换
v-html:就是想输出 HTML，而不是将数据解释后的纯文本代码如下

<div id="app" v-html='a'></div>

<script>
	var app = new Vue({
		el:"#app",
		data:{
			a:'<a href="#">这是一个连接</a>'
		}
	})//html显示时只会显示出<a>标签内的内容
	//a 的内容将会被渲染为一个具有点击功能的 <a> 标签，而不是纯文本。
</script>

在“{{   }}”中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、 如三元运算等

<div id="app">
	{{num/10}}
	{{isOK? '确定':' 取消'}}
	{{text.split(',')}}
</div>

<script>
	var app = new Vue({
		el:'#app',
		data:{
			num:100,
			isOK:false,
			text:'123,456' 
		}
	})
</script>

Vue.js 只支持单个表达式，不支持语句和流控制。另外， 在表达式中，不能使用用户自定义 的全局变量， 只能使用 Vue 白名单内的全局变量。