vue.js 只支持单个表达式, 不支持语句和流控制. 另 外, 在表达式中, 不能使用用户自定义
的全局变量, 只能使用 vue 白名单内的全局变量, 例如 Math 和 Date. 以下是一些无效的示例:
〈! 一这是语旬, 不是表达式 一 〉
{{ var book = 'Vue.js 实战' }}
〈! 一不能使用流控制, 要使用三元运算 一〉
{{ if (ok) return msg ))
数据驱动 DOM 是 Vue.JS 的核心理念, 所以不到万不得已时不要主动操作 DOM, 你只需要维护好数据, DOM 的事 Vue 会 帮你优雅的处理.
如果直接在自定义组件上使用 class 或: class, 样式规则会直接应用到这个组件的根元素上.
v-once 也是一个不需要表达式的指令, 作用是定义它的元素或组件只渲染一次, 包括元素或
组件的所有子节点. 首次渲染后, 不再随数据的变化重新渲染, 将被视为静态内容.
v-show 不能在 < template > 上使用
v-for 还可以迭代整数 :
- <span v-for="n in 10">
- {{ n }}
- </span>
- //1 2 3 4 5 6 7 8 9 10 注意: 从 1 开始 splice()
从第 2 位开始删除 0 个元素, 插入 "drum"
- var myFish = ["angel", "clown", "mandarin", "sturgeon"];
- var removed = myFish.splice(2, 0, "drum");
- // 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
从第 2 位开始删除 1 个元素, 插入 "trumpet"
- var myFish = ['angel', 'clown', 'drum', 'sturgeon'];
- var removed = myFish.splice(2, 1, "trumpet");
- // 运算后的 myFish: ["angel", "clown", "trumpet", "sturgeon"]
- // removed: ["drum"]
Vue 在检测到数组变化时, 并不是直接重新渲染整个列表, 而是最大化地复用 DOM 元素. 替 换的数组中, 含有相同元素的项不会被重新渲染,
因此可以大胆地用新数组来替换旧数组, 不用担 心性能问题 .
以下变动的数组中, Vue 是不能检测到的, 也不会触发视图更新:
• 通过索引直接设置项, 比如 App.books[3] = { ... }.
• 修改数组长度, 比如叩 p.books.length= 1.
- <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>
- // ...
- methods: {
- warn: function (message, event) {
- // 现在我们可以访问原生事件对象
- if (event) event.preventDefault()
- alert(message)
- }
- }
在组件中, 使用选项 props 来声明需要从父级接收的数据, props 的值可以是两种, 一种是字 符串数组, 一种是对象
注意, 在 JavaScriptz 中对象和数组是引用类型, 指向同一个内存空间, 所以 props 是对象和数组时, 在子组件内改变是会影响父纽件的.
来源: http://www.bubuko.com/infodetail-3147462.html