vue2从入门整理

简介

Vue是一个响应式的web视图层框架；
响应式： 我们写代码只关注数据，视图随数据变化而变化。
视图层：UI层面的内容
框架和库：
框架是整个应用程序的设计方案，我们要做到一些功能，就必须遵照框架的规则去实现
库是很多方法的集合，是项目中功能的解决方案。我们要实现一些功能，可以自主的去调用库里的方法，还可以自己去定义一个方法实现。

引入Vue

1.直接cdn引入

   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

	1. 引⽤全部 vue.js，运⾏时编译及渲染

	<div id="app">
      <p>{{message}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
 	<script>
      new Vue({
        el: '#app',
        data: {
          message: 'hello-world',
        },
      })
    </script>

运行时会先按照花括号的格式渲染成文本，等vue依赖下载完成，并且通过实例化拿到message的值之后才会编译并渲染出vue模板下的页面

2. 引⽤部分 vue.js，仅引⼊渲染部分

    这种方式不会有编译的过程，代码自上往下执行，数据有时，才渲染相应数据页面，也经常在Vue.component()中使用

	<div id="app"></div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'hello-world',
        },
        render: function(createElement) {
          return createElement('p',this.message)
        }
      })
    </script>

2.vue-cli工程化搭建项目

常用指令

1.v-bind绑定属性

	<div id="app">
      <p v-bind:title="title">{{message}}</p>
       <!-- 缩写格式 -->
       <p :title="title">{{message}}</p> 
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'hello-world',
          title: 'world-title',
        },
      })
    </script>

2.v-on绑定事件

	<div id="app">
      <p v-on:click="changeMessage()">{{message}}</p>
      <!-- 缩写格式 -->
      <p @click="changeMessage()">{{message}}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'hello-world',
        },
        methods: {
          changeMessage: function() {
            if (this.message === 'hello-world') {
              this.message = 'world';
            } else {
              this.message = 'hello-world'
            }
          }
        }
      })

3.v-model

 	<div id="app">
      <p v-for="item in items">{{item}}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          items: [1,2,3,4,5,6],
        },
      })
    </script>

4.v-show

 	<div id="app">
      <p v-for="item in items" v-show="item !== 4">{{item}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          items: [1,2,3,4,5,6],
        },
      })
    </script>

5.v-if/v-else

	<div id="app">
      <p v-for="item in items">
        <span v-if="item >= 5" :style="{color: 'red'}">大于等于5</span>
        <span v-else :style="{color: 'blue'}">小于5</span>
        {{item}}
      </p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          items: [1,2,3,4,5,6],
        },
      })
    </script>

6.v-for

 <div id="app">
      <p v-for="(item,index) in items">{{item}}-{{index}}</p>
      <p v-for="(value,key) in obj">{{key}}-{{value}}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          items: [1,2,3,4,5,6],
          obj: {a:1,b:2,c:3}
        },
      })
    </script>

7.v-html

	<div id="app" v-html="html">
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          html: '<p>Hello-World</p>'
        },
      })
    </script>

8.v-text

	<div id="app">
      <p v-text="text"></p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          text: 'Hello-World'
        },
      })
    </script>

计算属性与函数

 	<div id="app">
      <p>{{message}}</p>
      <input v-model="message"></input>
      <input v-model="message2"></input>
      <p v-if="getLen">长度大于11</p>
      <p v-else>长度小于等于11</p>
      <p>{{len()}}</p>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello-World',
          message2: 'Hello-World2'
        },
        computed: {
          getLen: function () {
            console.log('computed')
            return this.message.length > 11;
          }
        },
        methods: {
          len: function() {
            console.log('function')
            return this.message.length;
          }
        }
      })
    </script>

执行上述代码可见

1.改变message,computed和function都会触发

2.改变message1,computed不会触发，而function依旧会触发

所以，computed只会在依赖发生改变时触发更新值。

组件

	<div id="app">
      <hello-world v-for="item in items" :item="item"></hello-world>
    </div>
    <script>
      Vue.component('hello-world', {
        props: ['item'],
        render: function(createElement) {
          return createElement('p', this.item)
        }
      })
      new Vue({
        el: '#app',
        data: {
          items: [1,2,3,4,5,6],
        },
      })
    </script>

生命周期（官网图）