Vue学习第一天

首先在html中导入Vue的js文件 可以下载vue.min.js或者使用cdn方法https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

第二步: Hello Vue

效果:

vue将dom与数据建立连接 并且是响应式的: 在控制台输入app.message = 'helloword'  Enter

还有另一种方法:

<meta charset=utf-8>
<script src="../js/vue.min.js"></script>
<div id="app" style="color: red;font-weight: bold">
    {{message}}
</div>
<div id="app-2">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'hello Vue!'
        }
    })
    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
</script>

带有"v-"前缀的为Vue指令 

v-bind:该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”

v-once: 该指令表示该元素下的数据只更新一次(初始化那次)

v-html: {{}}的变量会显示为文本 该指令的值会解析为html

v-if: 判断该元素是否显示

控制台输入app3.seen = false Enter 元素消失 (此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果)

v-for: 该指令可以绑定数组的数据来渲染一个项目列表

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

v-on: 该指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法

     我们只修改状态  将状态对应到Dom的操作由Vue完成

v-model: 它能轻松实现表单输入和应用状态之间的双向绑定

将一个变量显示在两处 在input修改message,p标签的文本也会修改

第三步: 组件化应用构建

理解: 基于已有的html标签 封装自己的标签

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象
      todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，稍后再
      作详细解释。
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item" //todo为自定义prop
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'], //自定义属性数组
  template: '<li>{{ todo.text }}</li>' //将todo属性的值与dom元素的样式相连,使todo有实际意义
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})

     官方对组件化解释: Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

vue实例的几个知识点

一 实例初始化就存在的属性对应值一旦改变Vue就会将其对应到Dom元素,初始化后加如的属性没有效果 还有:

<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

<script>
    var obj = {
      foo: 'bar'
    }

    Object.freeze(obj)  //阻止对象改变

    new Vue({
      el: '#app',
      data: obj
    })
</script>

二 Vue实例属性与用户自定义属性用$区分

var data = { a: 1 }
    var vm = new Vue({
        el: '#example',
        data: data
    })
    console.log("vm.data: "+vm.data);
    console.log("vm.$data: "+vm.$data);
    console.log("vm.el: "+vm.el);
    console.log("vm.$el: "+vm.$el);

效果:

        

三 实例生命期钩子

理解: 实例的几种状态切面

                       

   有 created,mounted,updated,destored (都是动词的过去式) 官方提醒:不要将这些属性的值与箭头函数() =>绑定

第四步: 语法了解

 一 {{}}与指令的的值可以为变量(如上:''message")与表达式(单目,双目,三目连接的运算或message.split('').reverse().join('')) 

二 修饰符:例如 .prevent 修饰符告诉 v-on 指令对于触发的事件调用event.preventDefault()(阻止元素该事件的默认行为)

<form v-on:submit.prevent="onSubmit">...</form>

还有.stop停止冒泡 .self该事件不接受冒泡或捕获的触发 .Middle点击鼠标中键才触发 .once...等

三  缩写 最常用的 "v-bind:" 可以缩写为":","v-on:"可以缩写为"@"(就这两个)   

<a v-bind:href="url">...</a>
<a :href="url">...</a>

<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

第五步: 了解计算属性与侦听器   

一 基础例子:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter (后面有设置setter方法)
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

二 计算属性(computed)与方法(methods)的比较   用方法实现上操作:

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

计算属性是属性对应的值会存入缓存,当响应式依赖的数据(message)发生改变时 值会自动改变 其他时候不用计算直接调用 和其他键值对一样   方法择每次取值都会调用一次     

三 计算属性与侦听属性    

watch(侦属性)实现:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello',
    reversedMessage: ''
  },
  watch: {
    //键为要侦听的属性,值为回调函数或函数名
    message: function (val) {
      // `this` 指向 vm 实例
      this.reversedMessage = val.split('').reverse().join('')
    }
  }
})
</script>

对比: 当reversedMessage 由多个属性(message1,message2..)动态决定时 watch的写法就麻烦一些,当需要在数据变化时执行异步或开销较大的操作时watch会好一点

四 setter方法

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
      fullName: {
        // getter
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
  }
}
})
</script>