在单页组件里 this. 后面可以访问 data、prop、method 里的属性。注意嵌套的方法里的this不行，把this当参数传进去就好了。
使用js
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div> vm.a == data.a // => true vm是一个vue实例，它俩的指向是一样的
初始化后再向data里添加的数据不是响应式的
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
数据使用
•
在标签尖括号里的
引号直接包裹：<div v-bind:class="color">，color是变量
•
在标签内的
用{{}}包裹：<p>{{ number + 1*10/3 }}</p>
方法使用
•
在尖括号里
@click="deleteEle(element)"
•
在标签里
{{reverse1()}}
<div id="app">
{{msg}}
<p>Using mustaches: {{ rawHtml }}</p>
<p v-html="rawHtml"></p>
<div v-bind:class="color">test...</div>
<p>{{ number + 1*10/3 }}</p>
<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>
<p>{{ message.split('').reverse().join('') }}</p>
<p>{{reverse1()}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg: "hi vue",
rawHtml: '<span style="color:red">this is should be red</span>',
color: 'blue',
number: 10,
ok: 1,
message: "vue"
},
methods:{
reverse1:function(){
return this.message.split('').reverse().join('')
}}
});
vm.msg = "hi....";
</script>
/////////////////////////////////////////////////////////////////////////////
var data = { a : 1 };
Object.freeze(data);//使这个对象不再响应式刷新view
var vm = new Vue({
el : "#app",
data : data
});
评论区