Vue.js教程_2

2019-11-28 本文已影响0人五秋木

Object.freeze()可以阻止修改现有的属性，也意味着响应系统无法再追踪变化。参数为json对象。例如

var obj = {foo: "bar"}
object.freeze(obj)
new Vue({
  el: '#app',
  data: obj
})

<div id="app">
    <p>{{ foo }}</p>
    <!-- 这里的 `foo` 不会更新！ -->
     <button v-on:click="foo = 'baz'">Change it</button>
</div>

取Vue实例的属性或者方法使用$：app.$data.a
生命周期包括：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed、给了用户在不同阶段添加自己的代码的机会。

生命周期
文本：<span>{{message}}</span> 一次性插值：<span v-once>这个将不会改变: {{ msg }}</span>，当数据改变时，该显示不会改变。
HTML语句：使用v-html，例如：<p>Using v-html directive: <span v-html="rawHtml"></span></p>
Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令。暂时没搞懂

使用 JavaScript 表达式，例如:

 {{ number + 1 }}

 {{ ok ? 'YES' : 'NO' }}

 {{ message.split('').reverse().join('') }}

 <div v-bind:id="'list-' + id"></div>

指令接受参数，例如：v-bind响应式地更新HTML特性。<a v-bind:herf='url'>...</a>；<a v-on:click="dosomething">...</a>
指令接受动态参数，用方括号括起来的Javascript表达式。<a v-bind:[attributeName]="url">...</a>
动态参数预期求得的一个字符串，例如·：Vue实例中data有属性：attributeName，其值为herf，则绑定等价于v-bind:herf。异常情况下为null，显性地用于移除绑定。对动态参数表达式的约束：
- 空格和引号放在HTML attributeName中无效，引发警告。<a v-bind: ['foo' + bar]="value">...</a>
- 在DOM中使用模板(直接在HTML中撰写模板)，避免使用大写字符命名键名，浏览器会把attributeName强制转化为小写。<a v-bind:[someAttr]="value">...</a> 转化为v-bind:[someattr]
修饰符：一个指令应该以特殊方式绑定。例如：<form v-on:submit.prevent="onSubmit">...</form>
缩写
- v-bind：<a v-bind:href="url"></a>等价于<a :href="url"></a>
- v-on: <a v-on:click="dosomething"></a>等价于<a @click="dosomething"></a>