vue-starter-study-node

参考文献：https://www.jianshu.com/p/c4a87e1b4ef7 

1 vue 挂载点 模板 与实例 

挂载点：Vue中的el属性所绑定的DOM节点，Vue只会处理挂载点内的内容；

模板：挂载点内部的内容都是模板
模板不仅仅可以放在挂载点内部，也可以放在Vue实例中，用template属性，写在template属性中；

实例：如：new Vue（{……}）

2 实例中的常用的属性方法事件

属性

vm.$data 获取实例中的数据对象，页可简写为vm.msg 直接访问data中的数据变量名；

vm.$el 获取vm实例中的dom对象（挂载点）

vm.$option 获取实例中的选项，如mthods data 或者子弟定义在data外的选项；

vm.$refs 获取实例中所有添加了ref的Dom对象，

方法

 

3 常用指令

v-text ：不转义，直接文本输出，可以等同于JS的text属性；

<h1 v-text="msg"></h1>
等价于
<h1>{{msg}}</h1>

v-html ：转义，并解释为html，等同于JS的innerHtml；

<h1 v-html="msg"></h1>

v-once：其关联的实例只会渲染一次

v-show：根据条件展示元素，其元素一定会存在于dom中；

v-if：可以实现条件渲染，根据表达式的值的真假条件来渲染元素；

v-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用；

v-else-if：充当v-if的else-if块，可以链式的使用多次，可以更加方便的实现switch语句；

注意：v-if有更高的切换开销，v-show有更高的初始渲染开销；
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

v-bind：动态绑定一个或多个特性，常用于动态绑定class、style、href等；

<div id="app">
    <!--数组语法：errorClass在data对应的类一定会添加-->
    <!--is-active是对象语法，根据activeClass对应的取值决定是否添加-->
    <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            activeClass: false,
            errorClass: 'text-danger'
        }
    })
</script>

渲染结果：

<!--因为activeClass: false，所以is-active不被渲染-->
<p class = "text-danger"></p>

 

v-on：绑定事件，事件定义在methods中

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

v-model：在表单元素上创建双向数据绑定，监听用户输入以便更新数据

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-model修饰符
<1> .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<input v-model.lazy="msg">

<2> .number
自动将用户的输入值转化为数值类型

<input v-model.number="msg">

<3> .trim
自动过滤用户输入的首尾空格

<input v-model.trim="msg">

 

v-for：用v-for指令根据遍历数组来进行渲染

<div v-for="item in items">
  {{ item.text }}
</div>

<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>

<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>