vue实现响应的数据绑定和组合的视图组件
参考资料:
Webpack 入门教程:http://www.runoob.com/w3cnote/webpack-tutorial.html
官方文档:http://vuejs.org/v2/guide/syntax.html
中文文档:https://cn.vuejs.org/v2/guide/syntax.html
一、使用示例:
1、在html页面中引入 vue.min.js
(1) 可以到官网下载该js并用 <script> 标签引入
(2) 直接用cdn的方式引入,cdn的地址为 https://cdn.staticfile.org/vue/2.2.2/vue.min.js】
2、第一个demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>first Demo</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<!-- 只能在该绑定的id中使用vue定义的属性和函数,通过{{ }} 输出对象属性和函数返回值 -->
<div id="vueTest">
<h1>{{testA}}</h1>
<h1>{{testB}}</h1>
<h1>{{testC()}}</h1>
</div>
<script type="text/javascript">
var myVue = new Vue({ //通过new实例化Vue来实现语法定义
el: '#vueTest', //el将该vue绑定到对应dom元素,这里对应html中的id
data: { //定义属性,
testA: "hehe1",
testB: "hehe2"
},
methods: { //定义函数,可通过 return 返回函数值。
testC: function() {
return this.testA + "测试";
}
}
})
</script>
</body>
</html>
浏览器显示:
二、语法分析:
1、vue对象分析:
<script type="text/javascript">
var data = { testA: "hehe1"}
var myVue = new Vue({
el: '#vueTest',
data: data
})
</script>
这时 data.testA 和 myVue.testA 是同一个对象,其中一个改变,另一个也会跟着改变
前缀 $的使用:myVue.$data === data 、 myVue.$el === document.getElementById('vueTest')
2、模板语法:
1) {{ }} : 文本插值,数据绑定
例子 :
<p>{{ message }}</p>
如果 message 为 'test1' ,则html内容为 <p>test1</p>
也可写表达式: {{5+5}} 、 {{ ok ? 'YES' : 'NO' }} 、{{ message.split('').reverse().join('') }}
2)v-html : 输出 html 代码
例子 :
<div v-html="message"></div>
如 message 为 '<a>test1<a>' ,则html内容为 <p><a>test1<a></p> , 会解析<a>标签
3)v-bind : 属性绑定
例子:
<div v-bind:id="'test-' + id">hehe</div> //id为 test-xxx
<a v-bind:href="url">链接</a>
<div v-bind:class="{'testA': testB}"> </div> //testA为true才有class=testB
示例:勾选框时div有 class=testB ,去掉勾选框则没该class
<div id="app">
<label for="r1">修改颜色</label><input type="checkbox" v-model="testA" id="r1">
<div v-bind:class="{'testA': testB}"></div>
</div>
<script>
new Vue({
el: '#app',
data:{
testA: false
}
});
</script>
4)v-if : 根据表达是true或false决定是否插入元素
例子: test 为true时才显示该元素
<p v-if="test">hehe</p>
5)v-on : 用于监听 DOM 事件
例子:点击事件
<a v-on:click="doClickThing">
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。 例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
<form v-on:submit.prevent="onSubmit"></form>
6)v-model : 用于 input 输入框中实现双向数据绑定,在 input、select、text、checkbox、radio 等表单控件元素使用。
例子:
所以input值改变则 vue 的message属性也改变,页面上引用到该属性的地方也会发生改变。
<div id="myVue">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#myVue',
data: {
message: 'myVues'
}
})
</script>
当input框中的值改变则 vue 的message属性也改变,页面上引用到该属性(这里的p元素)的地方也会发生改变。
3、缩写:
(1) v-bind
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
(2) v-on
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
4、过滤器
vue可以通过管道 ( | ) 的方式进行过滤,格式化信息
语法如下:
<p>{{ message | formatMsg }}</p>
<div v-bind:id="id | formatId"></div>
formatMsg 、 formatId 为过滤器的表达式,其将接受过滤的值作为第一个参数。
实例:将输入的字符串第一个字母转为大写
<div id="myVue">
{{ message | changeMsg }}
</div>
<script>
new Vue({
el: '#myVue',
data: {
message: 'test'
},
filters: {
changeMsg : function (value) { //value对应message的值
if (!value) return ''
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
注意:过滤器可串联 、可接受参数
<p>{{ message | filterB | filterA('arg1', arg2) }}</p>
message 是第一个参数,字符串 'arg1' 作为第二个参数, arg2 表达式的值作为第三个参数。
5、添加属性
给 vue 对象的 data 中添加新属性不能直接添加,要使用Vue.set方法,如
<script>
var myVue = new Vue({
el: '#vueTest',
data: {
testA: {}
},
methods: {
testC: function() {
if(!this.testA.type){
Vue.set(this.testA,'type',2)
}
}
}
})
</script>