web网页开发-Vue

1 简介

Vue 是一种渐进式 javascript 框架。能够将用户数据与虚拟 DOM 树（一种 js 对象浏览器对 HTML 页面结构的表示）进行绑定，
再自动通过一种机制将虚拟 DOM 树与实际 DOM 树链接。加快网页重新加载的速度。

2 用法

2.1 独立 Vue 实例

该方式通常用于单个 html 文件，测试时使用。通过 Vue 对象里的 el 属性绑定 DOM 树是当前 id="app"。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<div id="app">
    <!--    绑定变量-->
    {{ message }}
    <!--    绑定 html 语句-->
    <div v-html="my_html"> </div>
    <!--    绑定输入（双向绑定）-->
    <input v-model="message">
    <!--    绑定事件（函数）-->
    <button v-on:click="reverseMessage">reverse message</button>
    <!--    绑定变量-->
    <div :title="date">hahaha</div>
    <!--    vue 指令系统-->
    <div v-if = 'bool'>判断语句</div>
    <div v-else >else </div>
    <div v-for="num in array">{{num}}</div>
</div>

<script>
var app = new Vue({
    el:'#app',
    data: {
        message:'I am message',
        my_html:'<p>hello</p>',
        bool: true,
        array:[1,2,3],
        date:'页面加载于'+new Date().toLocaleString()
    },
    methods:{
        reverseMessage: function (){
            this.message = this.message.split('').reverse().join('')
        }
    }
})
</script>

2.2 Vue 组件使用

当系统有多个页面，在 vue 文件中使用。与 Vue 实例化使用主要区别有以下三点。

1. 变量不是直接作为对象使用，而是将变量作为 data() 函数返回数据，将不同组件间数据分隔。
2. 默认的 DOM 树直接绑定当前最高级 <div>。
3. 事件绑定的不是对象而是函数。

<div>
    <!--    绑定变量-->
    {{ message }}
    <!--    绑定 html 语句-->
    <div v-html="my_html"> </div>
    <!--    绑定输入（双向绑定）-->
    <input v-model="message">
    <!--    绑定事件（函数）-->
    <button v-on:click="reverseMessage">reverse message</button>
    <!--    绑定变量-->
    <div :title="date">hahaha</div>
    <!--    vue 指令系统-->
    <div v-if = 'bool'>判断语句</div>
    <div v-else >else </div>
    <div v-for="num in array">{{num}}</div>
</div>

<script>
export default {
    name:'app',
    data(){
        return{
          message:'I am message',
          my_html:'<p>hello</p>',
          bool: true,
          array:[1,2,3],
          date:'页面加载于'+new Date().toLocaleString()
        }
    },
    methods:{
        reverseMessage(){
            this.message = this.message.split('').reverse().join('')
        }
    }
}
</script>