var vm = new Vue {
el: "#my_id"
, data: {
name: "test"
,url: ""
,txt:"测试"
}
,methods: {
GetData: function(){
//获取数据
return this.txt；
}
}
,computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.txt.split('').reverse().join('');//反转字符串
}
}
，filters： {
capitalize: function (value) {
if (!value) return ''；
return value;
}
}
};
<div id = "my_id">
{{ txt| capitalize }}
</div>
data 用于定义属性，实例中有3个属性分别为：name、url、txt;
methods 用于定义的函数，可以通过 return 来返回函数值;
调用实例属性和方法：
vm.$el == "my_id";
alert(vm.$data);
methods,computed，效果上两个都是一样的；
computed 基于依赖缓存，只有相关依赖发生改变时才会重新取值。
而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
var vm = new Vue({
el: '#app',
data: {
name: 'a',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = 'B http://www.baidu.com';
v-html: 输出html代码
<div id="app">
<div v-html="message"></div>
</div>
<script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script>
指令： 带有 v- 前缀的特殊属性
v-bind 被用来响应地更新 HTML 属性
v-if/v-else-if/v-else
v-show
v-for
v-model : 在input、select、textarea、checkbox、radio 等表单控件元素上,
创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-on 监听 DOM 事件
v-for:
<div id="app">
<ul>
<li v-for="value in object"> {{ value }} </li>
</ul>
<ul>
<li v-for="(value, key)in object">{{key}}: {{ value }} </li>
</ul>
<ul>
<li v-for="(value, key, index)in object">{{index}}.{{key}}: {{ value }} </li>
</ul>
</div>
<script> new Vue({ el: '#app', data: { object: { name: 'a', url: '' } } }) </script>
//监听属性
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0, //双向绑定
meters:0
},
methods: {
},
computed :{
},
watch : { //实例监听
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})；
</script>
v-bind:class 设置一个对象(字符串或数组)，从而动态的切换 class:
<div class="static active text-danger"></div>
<div class="static"v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }"></div>
<div v-bind:class="{ 'active': isActive }"></div>
<div v-bind:class="[activeClass, errorClass]"></div>
v-bind:style 直接设置样式：
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">test</div>
</div>
<div v-bind:style="styleObject">test</div>
<div v-bind:style="[baseStyles, overridingStyles]">test</div>
v-on:click: 事件处理
<!-- `greet` 是在定义的方法名 -->
<button v-on:click="greet">Greet</button>
处理 DOM 事件细节修饰符，通过由点 . 表示的指令后缀来调用修饰符
.stop - 阻止冒泡
.prevent - 阻止默认事件
.capture - 阻止捕获
.self - 只监听触发该元素的事件
.once - 只触发一次
.left - 左键事件
.right - 右键事件
.middle - 中间滚轮事件
例如：
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
监听键盘按键事件修饰符：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
例如：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
<!-- 输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值） -->
<input v-model.number="age" type="number">
<!-- 自动过滤用户输入的首尾空格 -->
<input v-model.trim="msg">
