vueJs的学习笔记（二）

来源：互联网发布：任务多打码辅助软件编辑：程序博客网时间：2024/06/07 08:29

开始

一个实例的创建

            //一个实例的产生            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>

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>

阅读全文

1 0