Vue学习笔记（一）

1 Vue目录结构

• build：项目构建webpack的相关代码
• config：配置目录，包括端口号等
• node_modules：npm加载的项目依赖模块
• src：开发的目录模块，包含assets（资源文件），components（组件文件），App.vue项目入口文件，main.js项目核心文件
• static：静态资源文件，如图片，字体等
• test：初始测试目录
• .xxx：配置文件，比如语法配置，git配置等等
• index.html：首页入口文件
• package.json：项目配置文件
• README.md：项目说明文件

2 Vue对象

Vue对象的基本参数有：

• el：DOM元素的id
• data：用于定义属性
• methods：用于定义函数
• {{}}输出对象属性和函数返回值

一个Vue实例被创建时，会向Vue的响应式系统加入了data中能找到的所有属性，当这些属性的值改变时HTML视图也会发生相应变化。

3 Vue模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例数据。
Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统，结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组建的最小代价并应用到DOM操作上。

3.1 插值

插值分为两种方式：

• 纯文本
• HTML

纯文本可以使用{{}}插值，比如：

<div id="app">{{message}}</div>

<script>
new Vue({
	el:'#app',
	data:{
		message:'text'
	}
})
</script>

HTML使用v-html指令：

<div id="app" v-html="message"></div>

<script>
new Vue({
	el:'#app',
	data:{
		message:'<h1>h1标题</h1>'
	}
})
</script>

3.2 属性

属性绑定使用v-bind指令，比如：

<div v-bind:class="{'class1':use}"></div>

<script>
new Vue({
	el:'#app',
	data:{
		use:false
	}
})
</script>

3.3 表达式

可以在{{}}直接嵌入JS表达式，包括计算以及函数调用等等，比如：

<div id="app">
	{{5.222-1.2345}}
	<br>
	{{ok ? 'YES' : 'NO'}}
	<br>
	{{message.reverse()}}
</div>

<script>	
new Vue({
	el:'#app',
	data:{
		ok:true,
		message:'Reverse',
	}
})
</scirpt>

3.4 指令

指令是带有v-前缀的特殊属性，指令用于在表达式的值改变时，将某些行为应用到DOM上，比如：

<div id="app">
	<p v-if="seen">看到了</p>
</div>

<script>
new Vue({
	el:'#app',
	data:{
		seen:true
	}
})
</script>

3.5 参数

参数在指令后面以冒号表明，比如v-bind指令用于响应地更新HTML：

<div id="app">
	<a v-bind:href="url">某个网站</a>
</div>

<script>
new Vue({
	el:'#app',
	data:{
		url:'https://www.xxx.com'
	}
})
</script>

href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

3.6 修饰符

修饰符是以.指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定，例如.prevent修饰符告知v-on指令对于出发事件调用event.preventDefault()：

<form v-on:sbumit.prevent="onSubmit"></form> 

3.7 v-model

v-model用来在input，select，textarea，chekcbox，radio等表单控件元素上创建双向的数据绑定，根据表单上的值更新绑定元素的值。比如：

<div id="app">
	<p>{{message}}</p>
	<input v-model="message">
</div>

<script>
new Vue({
	el:'#app',
	data:{
		message:'text'
	}
})
</script>

3.8 按钮事件

可以使用v-on:click监听按钮事件，比如：

<div id="app">
	<p>{{message}}</p>
	<button v-on:click="reverse">反转字符串</button>
</div>

<script>
new Vue({
	el:'#app',
	data:{
		message:'reverseeeeee'
	},
	methods:{
		reverse:function(){
			this.message=this.messaage.split('').reverse().join('')
		}
	}
})
</script>

3.9 过滤器

允许定义过滤器用作一些常见文本的格式化，比如：

<div id="app">{{message | f}}</div>

<script>
new Vue({
	el:'#app',
	data:{
		message:'text'
	},
	filters:{
		f:function(value){
			if(!value) return ''
			value = value.toString
			return value.charAt(0).toUpperCase()+value.slice(1)
		}
	}
})
</script>

另外，过滤器可以串联以及接受参数：

{{message | filterA | filterB}}
{{message | filterA('arg1','arg2')}} // message作为filterA的第一个参数，'arg1','arg2'分别为第二个，第三个参数

将上面的过滤器改动一下：

<div id="app">{{message | f(10)}}</di>

<script>
new Vue({
	el:'#app',
	data:{
	},
	filter:{
		f:function(value,times){
			if(!value) return ''
			value = value.toString()
			value = value.charAt(0).toUpperCase()+value.slice(1)
			return value.repeat(times)
		}
	}
})
</script>

3.10 缩写

• v-bind:href可以缩写为:href
• v-on:click可以缩写为@click