Open TracerLee opened 7 years ago
此记录由于为1.x的版本不再作为学习参考 2017年4月7日 00:54:07
v-
,以指示它们是 Vue.js 提供的特殊特性。组件的应用模板
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
var vm = new Vue({
// 选项
})
阅读到http://cn.vuejs.org/guide/class-and-style.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue demo</title>
<script src="./node_modules/vue/dist/vue-1.0.js"></script>
</head>
<body>
<div id="example-2">
<p v-if="greeting">Hello {{* name}}!</p>
<p v-if="greeting">Hello {{name}}!</p>
<p>{{{html}}}</p>
<p>{{ok?'yes':'no'}}</p>
<p>{{ message.split('').reverse().join('') }}</p>
<p>首字母大写“过滤器”: {{ message | capitalize }}</p>
<a :href="http://baidu.com">link</a>
<button :disabled="disabledFn">Button</button>
<button @click="clickFn">Button</button>
<div>a={{a}},b={{b}}</div>
<div>fullName: {{fullName}}; firstName: {{firstName}}; lastName: {{lastName}}</div>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#example-2",
data: {
greeting: 1,
name: 'Vue.js',
html: '<strong>输出html</strong>',
ok: false,
message: 'hello world',
a: 100,
firstName: 'Foo',
lastName: 'Bar'
},
created: function () {
console.warn('vm is created.');
},
methods: {
disabled: function () {
console.error('disabled');
},
clickFn: function () {
alert('点击');
}
},
computed: {
b: function () {
return this.a + 1
},
// 相当于getter
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// }
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newVal) {
var names = newVal.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
});
vm.$watch('name', function (newVal, oldVal) {
console.log('变化了',newVal,oldVal);
});
</script>
vuex的map有如下写法
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
// ...
])
}
}
其中的使用扩展符...
来进行对象展开运算,标准的ES6只对数组有效,故一直报错...
查明原因原来是Babel的不同等级支持度不一样,需要设置不同的stage
解决方案
# 安装babel-preset-stage-2
$ npm i babel-preset-stage-2 -D
// 设置.babelrc,新增了stage-2
{
"presets": [
["es2015", { "modules": false }],
"stage-2"
]
}
再次启动程序npm run dev
,不报错了
汗!真是折腾,官网vuex没有告知这一点
v-html
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
列表渲染 由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:
vm.items.length = newLength
为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue
的效果, 同时也将触发状态更新:
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
避免第二种情况,使用 splice:
example1.items.splice(newLength)
组件
<!-- 传递了一个字符串"1" -->
<comp some-prop="1"></comp>
<!-- 传递实际的数字 -->
<comp v-bind:some-prop="1"></comp>
$on(eventName)
监听事件
使用 $emit(eventName)
触发事件
学习MVVM框架