Vue的学习（1）

指令 大括号 双向绑定

<div id="app">
  <input type="text" v-model="message"><!--指令-->
  <p>Hello {{message}}</p><!--大括号表达式-->
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  // <!--
  // 1. 引入Vue.js
  // 2. 创建Vue对象
  // el : 指定根element(选择器)
  // data : 初始化数据(页面可以访问)
  // 3. 双向数据绑定 : v-model
  // 4. 显示数据 : {{xxx}}
  // 5. 理解vue的mvvm实现
  // -->

  //百度了下v-model
  // v-model="sth" 相当于 :value="sth"的缩写
  // v-model 是vue的一个语法糖，用于在表单控件或者在组件上创建双向绑定。
  // 双向绑定即修改model后界面view会自动更新，
  // 如果用户更新了view，model的数据也会自动更新。
  const vm = new Vue({
    el:'#app',
    data:{
      message:'Hello Vue!'
    }
  })

模板语法

<div id="app">
  <h2>1. 双大括号表达式</h2>
  <p>{{msg}}</p>
  <p>{{msg.toUpperCase()}}</p>
  <!--输出的是超链接 <我是Vue>-->
  <p v-html="txt"></p>
  <!--输出的是文本<<a href="">我是Vue</a>>-->
  <p v-text="txt"></p>
  
  <h2>2. 指令一: 强制数据绑定</h2>
  <!--  :后面的就是一个表达式了-->
  <img :src="imgUrl" alt="">
  <img v-bind:src="imgUrl" alt="">

  <h2>3. 指令二: 绑定事件监听</h2>
  <!--   @绑定事件监听  一般单独放-->
  <button v-on:click="test">test1</button>
  <button @click="test2('abc')">test2</button>
  <!--可以传参-->
  <button @click="test2(txt)">test2</button>

</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el:'#app',
    data:{
      msg:'i will back',
      txt:'<<a href="">我是Vue</a>>',
      imgUrl:'https://cn.vuejs.org/images/logo.png'
    },
    methods:{
      test(){
        alert('hhhhhhhhhh')
      },
      test2(content){
        alert(content)
      }
    }

  })
</script>

计算属性和监视

<div id="demo">
  姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
  名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
  <!--fullName1是根据fistName和lastName计算产生-->
  姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
  姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
  姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>

  <p>{{fullName1}}</p>
  <p>{{fullName1}}</p>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  // <!--
  // 1. 计算属性
  // 在computed属性对象中定义计算属性的方法
  // 在页面中使用{{方法名}}来显示计算的结果
  // 2. 监视属性:
  //   通过通过vm对象的$watch()或watch配置来监视指定的属性
  // 当属性变化时, 回调函数自动调用, 在函数内部进行计算
  // 3. 计算属性高级:
  //   通过getter/setter实现对属性数据的显示和监视
  // 计算属性存在缓存, 多次读取只执行一次getter计算
  // -->
  const vm = new Vue({
    el:'#demo',
    data:{
      firstName:'A',
      lastName:'B',
      fullName2:'A B'
    },
    computed:{
      // 在computed属性对象中定义计算属性的方法
      //初始化显示时执行，相关的data属性数据发生改变时执行
      fullName1(){//计算属性的一个方法，方法的返回值作为属性值
        console.log('fullName1')
        console.log(this)//就是vm对象
        //这里我就疑惑为什么this是vm还能this.firstName，就很奇怪
        // 百度了下
        // 其实Vue实例化的时候，
        // 通过getData方法中call修改this指针来实现Vue实例后能获取到data体内的数据
        console.log(this.firstName)
        return this.firstName + ' ' + this.lastName
      },
      fullName3:{
        get(){
          //计算并返回当前属性的值  从外面获取
          // 回调函数 当需要读取当前属性值时，根据相关的数据计算并返回当前属性值
          return this.firstName + ' ' + this.lastName
        },
        set(value){//就是fullName3最新属性值   监听自己变化没 更改的是外面的
          //监视当前属性值变化
          //当属性值发生改变时回调，更新相关的数据
          const names = value.split(' ')
          this.firstName = names[0]
          this.lastName = names[1]
        }
      }
    },
    watch:{
      //参数里面是新值和旧值
      firstName(newVal,oldVal){//firstName发生变化，去修改fullName1值
        this.fullName2 = newVal + ' ' + this.lastName
      }
    }
  })
  vm.$watch('lastName' , function (newVal,oldVal) {
    //更新fistName2
    this.fullName2 = this.firstName + ' ' + newVal
  })

</script>