VUE-学习笔记

该文章为VUE.js学习笔记,内容大部分来源于《VUE.js权威指南》一书以及官方文档的整合,通过自己学习的步骤加以展示,最终准确性,参考官方文档。

文本插值方式:
  1. <span>{{ text }}</span>

1.有时候只需要渲染一次数据,之后再不关心数据变化可以使用*实现。
2.双大括号会把里面的只当做字符串处理{{ text }}
3.三个大括号则是渲染一段html代码 {{{ html }}}


第三章(指令)

内部指令:
v-if
  1. <p v-if="true"></p>

相当于js的判断if,可以混用v-else-ifv-else用法。if是渲染和不渲染DOM元素,而下面的v-show的值为false时则是使用display="none"属性将其影藏。

v-show

也是为了将DOM元素不显示,方式则是用display="none"属性控制。用法v-show

v-model

v-model命令用在inputselecttextcheckbox等表单空间元素上,目的是为了创建数据的双向绑定。用法:

  1. <input type="text" v-model="user.name"/>

当输入框中的数据更新时,会同步将data中的数据更新。

v-repeat

该命令暂不详细说明。

v-for

循环渲染,常用与列表循环,用法:

  1. <li v-for="item in list"> {{ item.msg }} </li>
  2. //script //————————
  3. var demo = new Vue({
  4. data(){
  5. return {
  6. list:[{
  7. msg:1213
  8. },{
  9. msg:456456
  10. }]
  11. }
  12. }
  13. })

可以使用{{ $index }}来输出编号。

提示!VUE在修改数组items时,如果遇到了一个包含有track-by="_uid" , uid为一个唯一值,可以使用$index来替代,那么它知道可以服用这个已有对象作用域的DOM元素。

Vue.js增加了$add(key,val)$set(key,val)$delete(key)三种方法来添加删除属性,来触发视图更新。

filterBy:(该方法已经被移除)

说明:使用Vue.js提供的内置过滤器或排序数据一起使用。
语法:filterBy searchKey[in dataKey…]

  1. <input v-model="searchText">
  2. <li v-for="user in users | filterBy searchText in "name" ">{{ user.name }}</li>

上述示例会渲染一个input的搜索框,和一列 li 标签。当在搜索框中输入内容时,会更具name自动匹配相关的 li 内容显示在下面。

v-text

该指令可以更新元素的textContent属性。示例代码如下:

  1. <span v-text="msg"></span>
  2. //相当于如下写法
  3. <span>{{ msg }}</span>
v-html

该指令可以更新元素的innerHTML属性。示例代码如下:

  1. <div v-html="msg"></div>
  2. //相当于如下写法
  3. <div>{{ msg }}</div>

不建议在网站上直接绑定动态渲染HTML片段,容易造成XSS攻击。


v-bind

该指令用于响应式更新HTML特性,将一个或多个attribute,或者一个组件prop动态绑定到表达式,v-bind也可以简写:

  1. <img v-bind:src="imgSrc"/>
  2. //缩写形式
  3. <img :src="imgSrc"/>

当该命令对class或者style进行绑定时,可以是其他类型的值,如数组或对象。如下:

  1. <div :class="{ classB: isB }"></div>
  2. //理解为
  3. isB ? classB : ""

如果是绑定多个属性,则写为:(注:此处的所有key会转换为小写)

  1. <div v-bind="{
  2. id : thisId,
  3. otherData : otherDataList
  4. }" ></div>

如果是给子组件传递多个值,在子组件中可以使用prop来接受多个数据传递:

  1. <Subassemblies
  2. :mdValuesP="msg.name"
  3. :fullPageStatusP="false"
  4. :editStatusP="true"
  5. :previewStatusP="true"
  6. :navStatusP="true"
  7. :icoStatusP="false">
  8. </Subassemblies>
v-on

该指令用于绑定事件监听器,事件类型由参数指定;表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

使用在普通DOM上只能监听原生DOM事件,使用在自定义元素组件上,也可以监听子组件触发的自定义事件。

使用方法:

  1. <button v-on:click="doThis">点击按钮</button>
  2. //此时点击按钮时在组件的methods中触发事件如下:
  3. <script>
  4. export default {
  5. data(){
  6. return {
  7. }
  8. },
  9. methods:{
  10. doThis() {
  11. console.log("点击了按钮")
  12. }
  13. }
  14. }
  15. </script>
  16. // v-on:click也可以所写成@click
  17. <button @click="doThis">点击按钮</button>
  18. //同时也可以给方法传递参数
  19. <button v-on:click="doThis("htllo",$event)">点击按钮</button>

v-on 后面不仅可以跟参数,还可以跟修饰符

  • .stop ——调用event.stopPropagation()。停止冒泡
  • .prevent ——调用event.preventDefault()。阻止默认行为
  • .capture ——添加事件监听器时使用capture模式
  • .self ——只当事件是从监听器绑定的元素本省触发时才会触发回调。VUE.js提供的键值有:[esc:27、tab:9、enter:13、space:32、delete:[8,46]、up:38、left:37、right:39、down:40]

使用方法:

  1. //延续上面的写法,
  2. //阻止默认行为
  3. <button @click.prevent="doThis">点击按钮</button>
  4. //阻止默认行为,没有表达式
  5. <form @submit.prevent></form>
  6. //串联修饰符
  7. <button @click.stop.prevent = "doThis">stop</button>
  8. //键修饰符,键别名
  9. <input @keyup.enter="onEnter"/>
  10. //键修饰符,键代码
  11. <input @keyup.13="onEnter"/>
1.0版本的v-ref、v-el合并为了ref

略…

v-pre

编译时跳过当前元素和他的子元素,可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] { display: none }一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

  1. [v-cloak] {
  2. display: none;
  3. }
  1. <div v-cloak>
  2. {{ message }}
  3. </div>
自定义指令

除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。通过Vue.directive(id,definition)来注册或获取全局指令。
同样也有自己的钩子函数,如下:

  1. // 注册
  2. Vue.directive("my-directive", {
  3. bind: function () {
  4. //只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
  5. },
  6. inserted: function () {
  7. // 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
  8. },
  9. update: function () {
  10. //所在组件的 VNode 更新时调用,但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  11. },
  12. componentUpdated: function () {
  13. //所在组件的 VNode 及其孩子的 VNode 全部更新时调用。
  14. },
  15. unbind: function () {
  16. //只调用一次, 指令与元素解绑时调用。
  17. }
  18. })

注册方法的使用,如下:

  1. // 注册一个全局自定义指令 v-focus
  2. Vue.directive("focus", {
  3. // 当绑定元素插入到 DOM 中。
  4. inserted: function (el) {
  5. // 聚焦元素
  6. el.focus()
  7. }
  8. })
  9. //使用
  10. <input v-focus="" />

自定义指令模块详细参考官方文档

v-model

该指令与表单组件结合使用,示例如下:

  1. <input v-model="age" type="text">
  2. //在input中值发生变化时,会自动更新age的值,同时会触发v-on:input=""事件,

v-model.lazy

在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,从而转变为在 change 事件中同步:

  1. <!-- 在 "change" 而不是 "input" 事件中更新 -->
  2. <input v-model.lazy="msg" >

v-model.number

如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:

  1. <input v-model.number="age" type="number">

这通常很有用,因为在 type=”number” 时 HTML 中输入的值也总是会返回字符串类型。

v-model.trim

如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:

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

过滤器

过滤器部分详细参考官方文档

过滤器使用管道符号|进行链接。过滤器的使用如下:

  1. <!-- 可以使用在大括号的表达式中 -->
  2. {{ message | capitalize }}
  3. <!-- 也可以是绑定指令的表达式后调用 -->
  4. <div v-bind:id="rawId | formatId"></div>

filters方法中编写过滤器方法:

  1. new Vue({
  2. // ...
  3. filters: {
  4. capitalize: function (value) {
  5. if (!value) return
  6. value = value.toString()
  7. return value.charAt(0).toUpperCase() + value.slice(1)
  8. }
  9. }
  10. })

上面的capitalize方法会接受道德第一个参数是message的值。

Vue.js 中也存在一个全局函数Vue.filter用于构造过滤器。示例:

  1. Vue.filter(ID,function(){
  2. //...
  3. })

该函数接收两个参数,第一个是过滤器ID,用于用户自定义过滤器的唯一标识。第二个参数则是过滤器的处理函数。

过渡

过渡模块详细参考官方文档

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加 entering/leaving 过渡,使用方法:

  1. <transition name="fade">
  2. <p v-if="show">hello</p>
  3. </transition>

再次我们需要加载名为fade的动画效果,而在css中fade会有 6 个(CSS)类名在 enter/leave 的过渡中切换:

  • v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
  • v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效(于此同时 v-enter 被删除),在 transition/animation 完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
  • v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效(于此同时 v-leave 被删除),在 transition/animation 完成之后移除。

所以我们在CSS部分可以写成:

  1. .fade-enter-active, .fade-leave-active {
  2. transition: opacity .5s
  3. }
  4. .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
  5. opacity: 0
  6. }

也可以通过Vue.transition(id , hooks)全局注册动画。
同时注册动画也可以使用钩子函数:

  1. <transition
  2. v-on:before-enter="beforeEnter"
  3. v-on:enter="enter"
  4. v-on:after-enter="afterEnter"
  5. v-on:enter-cancelled="enterCancelled"
  6. v-on:before-leave="beforeLeave"
  7. v-on:leave="leave"
  8. v-on:after-leave="afterLeave"
  9. v-on:leave-cancelled="leaveCancelled"
  10. >
  11. <!-- ... -->
  12. </transition>

注册函数可以写成:

  1. Vue.transition("expand",{
  2. // --------
  3. // 进入中
  4. // --------
  5. beforeEnter: function (el) {
  6. // ...
  7. },
  8. // 此回调函数是可选项的设置
  9. // 与 CSS 结合时使用
  10. enter: function (el, done) {
  11. // ...
  12. done()
  13. },
  14. afterEnter: function (el) {
  15. // ...
  16. },
  17. enterCancelled: function (el) {
  18. // ...
  19. },
  20. // --------
  21. // 离开时
  22. // --------
  23. beforeLeave: function (el) {
  24. // ...
  25. },
  26. // 此回调函数是可选项的设置
  27. // 与 CSS 结合时使用
  28. leave: function (el, done) {
  29. // ...
  30. done()
  31. },
  32. afterLeave: function (el) {
  33. // ...
  34. },
  35. // leaveCancelled 只用于 v-show 中
  36. leaveCancelled: function (el) {
  37. // ...
  38. }
  39. })
methods配置

1.methods中定义的方法内的this始终只想创建的Vue实例。
2.与实践绑定的方法支持参数event即原生DOM事件传入。
3.方法用在普通元素上时,只能监听原生DOM事件,用在自定义元素组件上时,也可以监听子组件触发的自定义事件。

示例:

  1. <button @click="say($event)>thisBtn</button>
  2. //...
  3. methods: {
  4. say: function(event){
  5. //现在可以对原生的DOM访问操作。
  6. }
  7. }

实例方法

详情参考官方文档
官方文档中提供了很多实例操作及访问的方法

对于实例模块的总览如下:

组件树访问

$parent

用来访问当前实例的父级实例

$root

用来访问当前实例的跟实例,如果没有父级实例,$root则标识当前实例本身。

children

用来访问当前组件实例的直接子组件实例。

$refs

用来访问使用了v-ref指令的子组件。

DOM访问

$el

用来挂载当前组件实例的DOM元素

数据访问

$data

Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。

$opctions

用于当前 Vue 实例的初始化选项。需要在选项中包含自定义属性时会有用处。

$props

一个对象,代表当前组件收到的 props。Vue 示例代理访问到这个 props 对象的属性们。

评论: