Vue语法笔记

Posted 2020-10-05 小蜗爬爬

选一个工作空间，新建一个vue项目：
$ vue init webpack vuedemo
$ cd vuedemo
$ npm install
运行项目：
$ npm run dev
在终端里面输入
cd dist
http-server -p 3000


Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：

v-on 指令绑定一个事件监听器  缩写【:】    v-on:click

用户输入,绑定数据：
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
绑定 DOM 元素属性:
v-bind   缩写：【@】
 V-bind:title
 v-bind:style
 v-bind:href
 v-bind:class
 对象： v-bind:class="{ active: isActive, ‘text-dange r‘: hasError }">
 数组：<div v-bind:class="[activeClass, errorClass]">
  Mustache 语法（双大括号），双大括号会将数据解释为纯文本，当数据改变时，插值处的内容会更新。
 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
 v-html 指令 为了输出真正的 HTML
 v-text 会把所有的内容当成字符串给直接输出出来。

逻辑流转：
 v-if 条件
 v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面
 v-show 根据条件展示元素的选项是，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
 v-if vs v-show
注：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
 v-for  循环
 v-for 具有比 v-if 更高的优先级。
 
 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
 过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。

组件： 非常类似于自定义元素——它是 Web 组件规范的一部分
 Vue.component(‘todo-item‘, {
  props: [‘todo‘],
  template: ‘<li>{{ todo.text }}</li>‘
})

比较：
计算属性 vs Methods
不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。 如果你不希望有缓存，请用 method 替代。

计算属性 vs Watched 属性
你有一些数据需要随着其它数据变动而变动时，然而，通常更好的想法是使用 computed 属性而不是命令式的 watch 回调。
当你想要在数据变化响应时，执行异步操作或开销较大的操作,需要一个自定义的 watcher

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：


 
<router-link :to="‘/content/‘ + i.id">
注：router-link 是 VueRouter2 “声明式导航”的写法，在实际转换为 html 标签的时候，会转化为 <a></a>，里面的 to 属性，就相当于 a 的 href 属性。

属性必须在 data 对象上:
  Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
Vue 不允许动态添加根级响应式属性:
 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上
 Vue.$set(object, key, value)
也使用 Object.assign() 或 _.extend() 方法来添加属性。但是，添加到对象上的新属性不会触发更新。可以创建一个新的对象，让它包含原对象的属性和新的属性；
例： this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })