掌握JavaScript和VUE：绑定、事件、条件指令、循环指令与全局组件

发表时间: 2021-04-18 16:18

Vue.js

Vue (读音 /vju ː /，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官方网站：https://cn.vuejs.org

HelloWorld

vue.js，需下载。

<!-- id标识vue作用的范围 --><div id="app">	<!-- {{}} 插值表达式，绑定vue中的data数据 -->	{{ message }}</div><script src="vue.js"></script><script>	// 创建一个vue对象	new Vue({		el: '#app',//绑定vue作用的范围		data: {//定义页面中显示的模型数据			message: 'Hello Vue!!!'		}	})</script>

单向绑定和双向绑定（数据渲染和指令）

数据渲染，插值表达式：{{}}

v-bind 特性被称为指令，指令带有前缀：v-，简写的形式就是一个冒号 : ，如下。

单向绑定：v-bind，双向绑定：v-model

<!--插值表达式、单向绑定(v-bind)、双向绑定（v-model）--><div id="app">    <!--v-bind-->    <h1 v-bind:title="message">        {{content}}    </h1>    <!-- v-bind 指令的简写形式： 冒号（:） -->    <h1 :title="message">        {{content}}    </h1>    <hr />    <!-- v-model 双向绑定-->    <input type="text" :value="text">    <input type="text" v-bind:value="text">    <input type="text" v-model:value="text">    <h1>{{text}}</h1></div><script src="vue.js"></script><script>    // 创建一个vue对象    new Vue({        el: '#app',//绑定vue作用的范围        data: {            content: '标题',            message: '页面加载:' + new Date().toLocaleString(),            text: "小奋斗的悲哀"        }    })</script>

绑定事件

v-on，指令绑定事件，click为指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法；

v-on，指令的简写形式：@

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。如：.prevent 修饰符就是告诉 v-on 指令对于触发的事件调用：event.preventDefault()，就是说阻止事件原本的默认行为。

<!-- 绑定事件 --><div id="app">    <input type="button" value="点击1" v-on:click="onMyClick()">    <!--方法可以不写()-->    <input type="button" value="点击2" v-on:click="onMyClick">    <hr />    <button v-on:mouseover="hello" v-on:mouseout="emptyMsg">鼠标事件</button>    <!--简写形式-->    <button @mouseover="hello" @mouseout="emptyMsg">鼠标事件</button>    <h1>{{message}}</h1>    <hr />    <form action="add" v-on:submit.prevent="onSubmit">        <label for="name">            <button type="submit">新增</button>        </label>    </form>    <hr />    <form action="add" @submit.prevent="onSubmit">        <label for="name">            <button type="submit">新增</button>        </label>    </form></div><script src="vue.js"></script><script>    new Vue({        el: '#app',        data: {            message: ''        },        methods: {            onMyClick() {                alert("点击了")            },            hello() {                this.message = "鼠标移动上去了"            },            emptyMsg() {                this.message = ''            },            onSubmit() {                alert("提交执行这里的方法");            }        }    })</script>

条件指令（条件渲染）

v-if ：条件指令，v-show：条件指令。

v-if ，是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 是有惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show ，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS 进行切换。

一般来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销。如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

<div id="app">    <input type="checkbox" v-model="ok">同意    <!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->    <h1 v-if="ok">true</h1>    <h1 v-else>false</h1>    <hr/>    <input type="checkbox" v-model="flag">是否显示    <!-- v:show 条件指令 初始渲染开销大 -->    <h1 v-show="flag">显示</h1>    <h1 v-show="!flag">不显示</h1>    <hr/>    <select name="type" v-model="type">        <option value ="A">A</option>        <option value ="B">B</option>        <option value="C">C</option>        <option value="D">D</option>    </select>    <h1 v-if="type=='A'">AAAAA</h1>    <h1 v-else-if="type=='B'">BBBBB</h1>    <h1 v-else-if="type=='C'">CCCCC</h1>    <h1 v-else>DDDDD</h1></div><script src="vue.js"></script><script>    new Vue({        el: '#app',        data: {            ok: true,            flag:false,            type:'A'        }    })</script>

循环指令（循环渲染、列表渲）

v-for ：列表循环指令。

<div id="app">    <ul>        <li v-for="n in 10">{{n}}</li>    </ul>    <hr />    <ol>        <li v-for="(n,index) in 10">{{index}}-->{{n}}-->{{index}}</li>    </ol>    <hr />    <table border="1">        <tr v-for="user in userList">            <td>{{user.id}}</td>            <td>{{user.username}}</td>            <td>{{user.name}}</td>            <td>{{user.from}}</td>        </tr>    </table>    <table border="1">        <tr v-for="(user, index) in userList">            <td>{{index}}</td>            <td>{{user.id}}</td>            <td>{{user.username}}</td>            <td>{{user.name}}</td>            <td>{{user.from}}</td>        </tr>    </table></div><script src="vue.js"></script><script>    new Vue({        el: '#app',        data: {            userList: [                { id: 1, username: 'shun', name: "舜", from: "畎亩" },                { id: 2, username: 'fuyue', name: "傅说", from: "版筑" },                { id: 3, username: 'jiaoge', name: "胶鬲", from: "鱼盐" },                { id: 4, username: 'guanyiwu', name: "管夷吾", from: "士" },                { id: 5, username: 'sunshuao', name: "孙叔敖", from: "海" },                { id: 6, username: 'bailixi', name: "百里奚", from: "市" }            ]        }    })</script>

组件（Component）

组件（Component）是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码。组件系统可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。

局部组件

<div id="app">    <Navbar></Navbar></div><script src="vue.js"></script><script>    var app = new Vue({        el: '#app',        // 定义局部组件，这里可以定义多个局部组件        components: {            //组件的名字            'Navbar': {                //组件的内容                template: '<ul><li>首页</li><li>系统管理</li></ul>'            }        }    })</script>

全局组件

012.js

// 定义全局组件Vue.component('Navbar', {    template: '<ul><li>首页</li><li>系统管理</li><li>模板管理</li></ul>'})

<div id="app">    <Navbar></Navbar></div><script src="vue.js"></script><script src="012.js"></script><script>    var app = new Vue({        el: '#app'    })</script>