Day 2

作者: zhaochengqi | 来源:发表于2018-05-23 23:27 被阅读37次

    因为我需要接手一个vue项目,所以学习的主要目标是能够快速使用vue输出页面。

    这几天大致过了一遍官方文档,体验还不错。

    下面是一些重要概念,复习时可以以此为纲要,按需查询官方文档

    指令

    指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

    1. 指令可以控制dom的渲染,可以类比到jstl中的 c:ifc:forche
    <p v-if="seen">现在你看到我了</p>
    
    1. 指令可以将变量绑定到dom特性(属性)
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    
    <!-- 缩写 -->
    <a :href="url">...</a>
    
    1. 指令可以绑定事件
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    
    <!-- 缩写 -->
    <a @click="doSomething">...</a>
    

    完整指令列表:

    插值

    ·文本

    <span>{{text}}</span>
    我们不再需要获取span节点然后写innerTEXT,Mustache标签会把text的值填上去。而且后续text值发生了改变,插值处的内容也会更新。如果不希望text后续的变化反应到dom,可以使用 v-once 指令
    <span v-once>这个将不会改变,这会影响到该节点上的其它数据绑定: {{ msg }}</span>
    双大括号会将数据解释为普通文本,而非 HTML 代码。
    <p><p>Using mustaches: {{ rawHtml }}</p></p>
    rawHtml = '<p>Hello vue</p>'
    输出
    <p>Using mustaches: <p>Hello vue</p></p>
    想要输出真正的html需要使用下面的指令

    ·原始HTML

    v-html
    <p><p>Using mustaches: {{ rawHtml }}</p></p>
    rawHtml = '<p>Hello vue</p>'
    输出
    <p>Using mustaches: Hello vue</p>

    注意

    Mustache 语法不能作用在 HTML 特性上(节点属性:id、class、style等),遇到这种情况应该使用 v-bind 指令

    <div v-bind:id="dynamicId"></div>
    

    计算属性

    我们可以声明了一个计算属性 ,提供的函数将用作属性该的 getter 函数:

    computed: {
      // 计算属性的 getter
      reversedMessage: function () {
        //Vue 知道 vm.reversedMessage 依赖于 vm.message;因此当 vm.message 发生改变时,所有依赖 
        //计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。
        //这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,
        //而不必再次执行函数。
        vm.reversedMessage 的绑定也会更新
          return this.message.split('').reverse().join('')
        }
      }
    }
    // 使用
    <p>Reversed message: "{{ reversedMessage() }}"</p>
    

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

    computed: {
      fullName: {
        // 计算属性的 getter
        get: function () {
          
        },
        // 计算属性的setter会在fullName变动时更新函数内的依赖自己的变量
        set: function (newValue) {
    
        }
      }
    }
    

    侦听属性

     watch: {
        // 如果 `question` 发生改变,这个函数就会运行
        question: function (newQuestion, oldQuestion) {
          
        }
      }
    

    数据与方法

    上面一直说的变量、方法是在创建Vue实例时传入的

    当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

    var vm = new Vue({
      data: {fullName: '', text: ''},
      methods: {alert: function(){alert(666)}}
    })
    

    相关文章

      网友评论

          本文标题:Day 2

          本文链接:https://www.haomeiwen.com/subject/prsdjftx.html