<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "app">
<p style = "font-size:25px;">计数器: {{ counter }}</p>
<p>结果computed：{{ result1 }}</p>
<p>结果methods：{{ result2() }}</p>
<temp v-bind:msg="counter"></temp>
<button @click = "counter++" style = "font-size:25px;">点我</button>
<br>
<br>
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
<br>
<br>
<div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div>
</div>
<script type = "text/javascript">
// 定义一个模板组件
var temp = {
template: '<p>这里是引入的组件{{ msg }}</p>',
props: ['msg']
};
// 定义一个混入对象
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write("欢迎来到混入实例");
}
}
};
var vm = new Vue({
el: '#app',
data: {
counter: 1
},
computed: {
// 计算属性的 getter
result1: function () {
// `this` 指向 vm 实例
return this.counter + 10
}
},
methods: {
result2: function () {
// `this` 指向 vm 实例
return this.counter + 10
}
},
components: {
temp
},
watch: {
counter : function(nval, oval) {
alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
}
},
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
},
runoob: {
/*
* binding: 一个对象，包含属性：name,value,oldValue,expression,arg,modifiers
* vnode: Vue 编译生成的虚拟节点。
* oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
*/
inserted: function (el, binding, vnode, oldVnode) {
// 简写方式设置文本及背景颜色
el.innerHTML = binding.value.text
el.style.backgroundColor = binding.value.color
}
}
},
mixins: [myMixin]
});
</script>
</body>
</html>1，el：指令所绑定的元素，可以用来直接操作 DOM。
2，data：自定义的参数值。
3，computed：计算属性，可以用methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
4，methods：自定义的函数，注意methods和computed的使用区别。
5，components：声明组件。
6，props：父类向子类组件传递参数。子类必须用props声明参数(数组类型)，父类在引入子类时指定参数值。prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
7，watch：监听某一参数值，如果变化则会触发。
8，directives：自定义指令。
9，mixins：混入。
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
