天天写 React ,vue 太生疏,系列文章可能只是对一些零散内容的简单整理和回顾,不具备深度。

本篇文章是对基础内容的代码复现及效果说明。

在 HTML 中直接使用 vue

如果只是学习 vue,直接在 HTML 中使用 vue 即可,推荐 live-server 作为本地热重载服务器。

示例代码:

<body>
  <div id="app"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  new Vue({
    // el: 挂载对象 多种形式
    // el: '#app'
    // el: '.app'
    el: document.getElementById('app'),
    // 模板
    template: '<h1>{{title}}</h1>',
    // 数据
    data: function () {
      return {
        title: 'Title---'
      }
    }
  })
</script>

效果(live-server 自动刷新):

222.gif

插值表达式

{{表达式}}

  • 对象字符串输出(不能连续写三个 {},应当: {{ {title: 'postbird'} }}
  • 字符串:{{'xxx'}}
  • Boolean: {{ flag }}
  • 三元表达式: {{true ? 'true': 'false'}}

指令

指令格式:v-xxxx

基本的一些指令

指令封装了一些 DOM 行为,结合属性作为一个 flag,根据不同的 flag,框架会进行相关DOM操作的绑定。

  • v-text: 同 innerText,插入纯文本值
  • v-html: 同 innerHTML ,插入 HTML 代码,存在 XSS 风险
  • v-ifv-else-ifv-esle: if 判断,会直接判断是否加载 HTML 代码,而不是控制 display,三个指令使用的时候 DOM 组件应当是相邻的。
  • v-show:同 display: none

示例代码:

  new Vue({
    // el: 挂载对象 多种形式
    // el: '#app'
    // el: '.app'
    el: document.getElementById('app'),
    // 模板
    template: `
      <div>
        <h1 v-text="title"></h1>
        <h2 v-html="'<s> delete title </s>'"></h2>
        <h2 v-if="flag" v-html="title"></h2>
        <h2 v-show="flag" v-html="'<i> delete title </i>'"></h2>
      </div>

    `,
    // 数据
    data: function () {
      return {
        title: '<s>Title-  - -<s>',
        flag: false
      }
    }
  })

TIM截图20181212002733.jpg

v-bind

给 DOM 属性赋值,属性可以是 DOM 原生属性,如 input 的 value 属性,也可以是自定义属性。

语法:

v-bind:属性名="常量|变量"

简写形式::属性名="常量|变量"

示例代码:

  new Vue({
    el: document.getElementById('app'),
    template: `
      <div>
        <input :value="title" :diy="'diy-value'"/>
      </div>
    `,
    // 数据
    data: function () {
      return {
        title: 'postbird',
      }
    }
  })

效果:

1.jpg

v-on

表达式: v-on:原生事件名="变量操作|函数名"

简写形式: @原生事件名="变量操作|函数名"

示例代码:

// 虽然可以 v-model
  new Vue({
    el: document.getElementById('app'),
    template: `
      <div>
        <input :value="title" :diy="'diy-value'"/>
        <button @click="title='postbird.....'">change</button>
        <button @click="clickHandle">simple change</button>
      </div>
    `,
    // 数据
    data: function () {
      return {
        title: 'postbird',
      }
    },
    updated(){
      console.log(this.title);
    },
    methods: {
      clickHandle(){
        this.title = Date.now()
      }
    }
  })

效果:

1.gif

v-model 双向数据绑定

给具备 value 属性的数据进行双向绑定

如果不使用 v-model,则需要 <input :value="val" @input="inputHadnle" 这两个操作实现数据变更,其中 inputHadnle 负责 val 的变更。

示例代码:

  new Vue({
    el: document.getElementById('app'),
    template: `
      <div>
        <input v-model="title" />
      </div>
    `,
    data: function () {
      return {
        title: 'postbird',
      }
    },
    updated(){
      console.log(this.title);
    }
  })

效果:

3.gif

v-for

基本用法:v-for="item in list"

  • list 是数组,通过 v-for="(item, index) in list" 取 index
  • list 是对象,通过 v-for="(val,key,index) in list" 取 value、key、index

示例代码:

<style>
.active{
  background-color: #ff5000;
}
</style>
<script>
  new Vue({
    el: document.getElementById('app'),
    template: `
        <ul>
          <li v-for="(item, index) in list" :key="index" :class="item%2===0 ? 'active':''">
              <span>{{item}} - {{index}} </span>
          </li>
          <li v-for="(val, key, index) in list2" :key="index" :class="index%2!==0 ? 'active':''">
              <span>{{val}} - {{key}} - {{index}} </span>
          </li>
        </ul>
    `,
    data: function () {
      return {
        list: [1,2,3,4,5,6],
        list2:{'key1':'val1','key2':'val2','key3':'val3',}
      }
    }
  })
</script>

效果:

2.png

methods

methods 对象声明于 Vue 根,内部属性为多个方法。

代码示例:

  new Vue({
    el: document.getElementById('app'),
    template: `
      <div>
        <button @click="clickHandle"> {{title}} </button>
      </div>
    `,
    data: function () {
      return {
        title: 'default'
      }
    },
    methods:{
      clickHandle() {
        console.log(this);
        this.title = Date.now();
      }
    }
  })

效果:

4.gif

输出 this:(this 其实已经指向了 vue)

5.jpg

组件化

  • 1、创建组件
  • 2、声明组件
  • 3、使用组件
  const Third = {
    template: `<h3>Third Component </h3>`
  }
  const Sub = {
    components:{ Third, },
    template: `<div><h2>Sub Component</h2> <Third /></div>`
  }
  const App = {
    components:{ Sub, },
    template: `<div> 
        <h1>App Component</h1> 
        <Sub>
    </div>`
  }
  new Vue({
    el: document.getElementById('app'),
    template: `<App />`,
    components: {App, },
  })

效果:

6.jpg

父子组件传值

示例代码:

代码作用:

const Third = {
    template: `<p>Third Component {{text}} </p>`,
    props:['text']
  }
  const Sub = {
    components:{ Third, },
    props: ['title'],
    template: `<div><p>Sub Component:{{title}} </p> <Third :text="title"/></div>`
  }
  const App = {
    components:{ Sub, },
    template: `<div> 
        <p>App Component:{{title}}</p> 
        <button @click=" title= Date.now()"> change </button>
        <Sub :title="title">
    </div>`,
    data(){
      return {
        title: 'title123'
      }
    }
  }
  new Vue({
    el: document.getElementById('app'),
    template: `<App />`,
    components: {App, },
  })

效果:

5.gif