vueJs的学习笔记（二）

开始

一个实例的创建

            //一个实例的产生
            var vm = new Vue({
                //你的代码
            })

数据与方法

vue的实例中采用了响应式系统，其实就是数据的双向绑定。
如果创建了一个对象，并且又在vue的实例中添加了这个对象，那么就可以实现“响应”.

        <script>
            //创建一个对象
            var data = {a:1}
            //把对象加入到实例中。实例会找到所有的属性
            var vm = new Vue({
                data:data
            })
            vm.a === data.a //true
            //设置某一个值，另外一个也会发生改变 ,反之亦然
            vm.a = 2;
            data.a//2
        </script>

但是响应式必须满足的条件是，对象和实例中都存在才可以。

vue中提供了一些预定义的方法和属性，为了和用户的区分开来，所以前面会添加$。

模版语法

插值

        <!--大括号是最常见的插值方式，它会和数据对象进行绑定更新-->
        <p>{{msg}}</p>

纯HTML

在vuejs中，单纯的大括弧数据绑定只能实现纯文本，但是提供了v-html来显示具有html结构的数据。

    <body>
        <div id="app">
            <p >{{datas}}</p>
        </div>
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    datas:"<em>你好啊</em>"
                }
            })
        </script>
    </body>
在网页中将会显示具有em（倾斜）属性的文本，如果没有v-html的绑定，就只会显示纯文本。

javascript

每一个{{}}中都可以使用javascript语句，但是限制的是，只能使用一个语句。

        <div id="app">
            <p >{{number+1}}</p>
        </div>

指令

指令是带有v-的特殊属性，一般是产生单个js的表达式。作用是，当表达式的值发生改变的时候，响应式的作用域dom结构。

参数

有的指令后面可以跟一个参数，以冒号开始，告知绑定的数据的作用。

<p v-on:click="onclick">点我</p>

它的含义就是，点击时触发点击事件，执行onclick函数。

计算属性与观察者

什么是计算属性，首先我们知道在{{}}运算符中可以执行js的计算,但是只建议进行简单的计算。如果把冗长的计算过程放在其中，不仅代码不宜阅读，而且不宜维护，所以对于计算的部分当然是放在js的地方。

HTML

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

JS

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})
这是js官方文档提供的一个实例。没错所谓的计算属性，就是把计算的部分放在vue的实例中，在HTMl只是提供一个引用。

那么这个时候就有一个疑问了，computed和methods的区别是什么？
1.computed在dom加载完毕就执行，而methods中的方法需要调用才可以执行。
2.二者都可以达到相同的效果。
3.computed的是基于依赖的关系，也就是最后的结果reverseMessage，取决于message是否发生改变。
4.computed的优势在于依赖缓存，假设有一个开销比较大计算属性A，B依赖A产生结果。如果A没有发生变化，那么B会调用之前的缓存，而无需重新计算。但是在methods中，每一次的调用，都会进行一遍计算。

所以computed的重要点在于依赖，如果没有依赖关系的computed是没有意义的。
computed本质上还是一个属性，所以使用的时候，采用属性的方式调用。

观察者

虽然默认的vue是没有setter的，但是我们可以自行添加。
比如当你想要在执行计算属性的时候，执行另一个异步操作（通常是为了解决开销大的情况），那么这个时候采用watch。
比如一个vuejs官方文档的实例：

<script>
var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },
  watch: {
    // 如果 question 发生改变，这个函数就会运行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce 是一个通过 lodash 限制操作频率的函数。
    // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
    // ajax 请求直到用户输入完毕才会发出
    // 学习更多关于 _.debounce function (and its cousin
    // _.throttle), 参考: https://lodash.com/docs#debounce
    getAnswer: _.debounce(
      function () {
        if (this.question.indexOf('?') === -1) {
          this.answer = 'Questions usually contain a question mark. ;-)'
          return
        }
        this.answer = 'Thinking...'
        var vm = this
        axios.get('https://yesno.wtf/api')
          .then(function (response) {
            vm.answer = _.capitalize(response.data.answer)
          })
          .catch(function (error) {
            vm.answer = 'Error! Could not reach the API. ' + error
          })
      },
      // 这是我们为用户停止输入等待的毫秒数
      500
    )
  }
})
</script>

posted on 2017-09-03 11:12  I_noname  阅读(142)  评论(0)  编辑  收藏  举报

导航