vuejs研究记录

vuejs研究记录

研究依据：
https://cn.vuejs.org/v2/guide/syntax.html
创建一个新的vue项目步骤：
https://www.jianshu.com/p/02b12c600c7b

组件化应用构建

script标签下添加注册vue组件“todo-item”，之后它可以作为vue标签进行使用.
创建一个新的

 // 定义名为 todo-item 的新组件
    Vue.component('todo-item', {
      // todo-item 组件现在接受一个
      // "prop"，类似于一个自定义 attribute。
      // 这个 prop 名为 todo。
      props: ['todo'],
      template: '<li>{{ todo.tet }}</li>'
    });
    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { id: 0, tet: '蔬菜' },
          { id: 1, tet: '奶酪' },
          { id: 2, tet: '随便其它什么人吃的东西' }
        ]
      }
    })

页面中引用刚刚创建的todo-item组件，使用 v-for 遍历 groceryList 中每个item（{}中的内容）。
将 prop（即todo）与 groceryList 中每个item 绑定

<div id="app-7">
      <ol>
          //现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，即其内容可以是动态的。
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id"
        >
        </todo-item>
      </ol>
    </div>

完成通过 prop 来与父单元解耦。

基础指令

v-bind：
动态绑定一个或一组指令or组件，在绑定属性时，写法类似HTML标签里的属性，但要在属性前添加“：”或者“v-bind”

html:
<p style="xxx"></p>
<img src="xxx.jpg"/>

vue:
<p v-bind:style="xxx"></p>
<img :src="xxx.jpg"/>

v-on:
用于监听DOM事件

计算属性与调用方法

eg1:计算属性

 <!--  计算属性  对应vm8 -->
    <div id="example">

      <p>ORINGINS message:{{message}}</p>
      <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>

    //计算属性
    var vm8=new Vue({
        el:'#example',
        data:{
            message:'Hello'

        },
        computed:{
           // 声明一个计算属性名为 reverseMessage
           
           reversedMessage: function () {
           // 这个function作用是通过message，使页面get到vm8.reverseMessage
           
           // 这里的this只带vm8实例


            return this.message.split('').reverse().join('')
          }
        }
        //通过开发者选项修改vm8.message的值来动态更改相应的reverseMessage

eg2:表达式中调用方法

<div id="example">

      <p>ORINGINS message:{{message}}</p>
      <p>Computed reversed function message2: "{{ reversedMessage2() }}"</p>
    </div>

    //表达式中调用方法
    var vm8=new Vue({
        el:'#example',
        data:{
            message:'Hello2'
        },
       
       methods:{
         reversedMessage2:function(){
          return this.message.split('').reverse().join('')
         }
       }
    });

侦听属性

依靠watch来实现对自身属性的监测

计算属性的getter和setter

    var vm8=new Vue({
        el:'#example',
        data:{
            message:'Hello',
            },
       computed:{
          
          fullname:{
            get:function(){
              return this.firstname+''+this.lastname;
            },
            set:function(newname){
              var names=newname.split(' ')
              this.firstname=names[0]
              this.lastname=names[names.length-1]
            }
          }
           
        }
        });

f12运行

vm8.fullname='a b';

得到结果：

vm8.firstname;
"a"
vm8.lastname;
"b"

侦听器watch

记录暂缓。。。