一、VUE学习笔记 1 | 事件、属性、侦听器、指令、生命周期函数

(1)vue实现挂载到某个元素上
(2)当vue实现创建后，形成双向绑定，上面dom listeners和data binding二个工具
(3)从view侧看，vue中datalistener工具帮助我们监听dom变化,如果dom变化更新model数据
(4)如果从model侧看,当我们更新mode数据,vue中的data bindings工具会帮我们更新view数据.

3、安装

（1）<script>标签引入（我使用的方法）

开发一般用开发版本 https://vuejs.org/js/vue.js

（2）CDN

（3）NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

# 最新稳定版
$ npm install vue

如果慢的话用

npm install --registry=https://registry.npm.taobao.org

最好不要用cnpm，可能会报bug

（4）命令行工具CLI

vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本。

4、First Of Vue

创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Vue入门</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">hello {
  {msg}}</div>
	<script>
		new Vue({
			el:"#root",
			data:{
				msg:"world"
			}
		})

	</script>
</body>
</html>

结果：

new vue()表示创建VUE实例

el ：#id 与页面元素做绑定

data: 存放标签内容，标签中使用{ {}}调用data的数据这里充分体现了VUE只关注与数据的变化，而不关心DOM操作

4.1 挂载点、模板、实例

（1）挂载点：这个div标签为VUE实例的挂载点

<div id="root">hello {
  {msg}}</div>

（2）模板：挂载点内部的内容成为模板内容

除了以上写法，还可以写到实例里面的template属性中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Vue入门</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root"></div>
	<script>
		new Vue({
			el:"#root",
			template:'<h1>hello {
  {msg}}</h1>',
			data:{
				msg:"world"
			}
		})

	</script>
</body>
</html>

（3）实例需要指定挂载点，VUE会自动结合模板和数据生成最终的内容放入挂在点中

4.2 VUE实例中的数据、事件与方法

4.2.1 数据

{ {}}取数据的方法叫插值表达式

结果：

这里插值表达式{ {}}也可改为 v-text或v-html

<div id="root">
    <h1 v-text="number"></h1>
</div>

v-text、v-html 区别

(1) v-text

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Vue入门</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div v-text="content"></div>
	</div>
	<script>
		new Vue({
			el:"#root",
			data:{
				content:"<h1>hello</h1>"
			}
		})

	</script>
</body>
</html>

结果

<h1>hello</h1>

(2) v-html

结果

hello

4.2.2 事件与方法 v-on

（1）事件处理方法

用v-on绑定事件与方法，用于监听DOM事件，可简写为@

实现效果：

点击hello后变为world

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>Vue入门</title>
	<script src="./vue.js"></script>
</head>

<body>
	<div id="root">
		<div v-on:click="handleClick">{
  {content}}</div>
       <!-- 或<div @click="handleClick">{
  {content}}</div> -->
	</div>
	<script>
		new Vue({
			el: "#root",
			data: {
				content: "hello",
			},
			methods: {
				handleClick: function () {
					this.content = "world"
				}
			}
		})

	</script>
</body>

</html>

（2）内联处理器中的方法

除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：