摘要
- vue简介
- vue使用
一、Vue简介：
简介：
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
Vue是前端三大框架之一(Angular、Vue、React)
JS渐进式框架：一个页面小到一个变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目
# 思考：vue如何做到一次引入控制整个项目 => 单页面应用 => vue基于组件的开发
初识vue，我们可以思考一下vue的工作原理：vue如何渲染一个页面
vue学习曲线：vue的指令 vue的实例成员 vue组件 vue项目开发
vue的优点：
①单页面：高效
②虚拟DOM：页面缓存
③数据的双向绑定：数据具有监听机制
④数据驱动：从数据触发，不是从DOM出发
vue的使用：
1、下载地址：https://cn.vuejs.org/v2/guide/installation.html
2、在html页面用<script> 标签引入使用
在html中书写挂载点的页面结构，用id表示
在自定义的script标签实例化Vue对象，传入一个大字典
在字典中通过 el与挂载点页面结构绑定，data为其通过数据
二、vue的基本使用：
点击事件：v-on:click="点击事件产生动作名称"
<body> <div id="app"> <!--{{ vue变量 }} 插值表达式--> <h1 v-on:click="clickAction">{{ h1_msg }}</h1> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 挂载点 data: { h1_msg: 'vue利用插值表达式渲染的变量内容', }, methods: { clickAction:function () { alert(123) } } }) </script>
vue操作简单样式
<body> <div id="app"> <p v-on:click="btnClick1" v-bind:style="v_style">点击p标签文字颜色变绿</p> <div v-on:click="btnClick2" v-bind:style="v_style">点击div标签文字颜色变绿</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 挂载点 data: { v_style: {color: 'black'}, }, methods: { btnClick1:function () { this.v_style.color = 'green' }, btnClick2:function () { this.v_style.color = 'red' } } }) </script>
小结：vue是通过v-*指令来控制标签，同时通过变量内的数据来驱动页面的渲染
vue相关指令认识：
文本指令
<body> <div id="app"> <!--插值表达式另一种形式 v-text--> <p>{{ msg1 }}</p> <p v-text="msg2"></p> <!--可以通过v-html来解析html标签--> <p v-html="msg3" v-on:mouseover="action1"></p> <!--v-once，必须赋初值，且渲染的结果不会变化--> <p v-once="msg4" v-on:mouseover="action">{{ msg4 }}</p> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 挂载点 data: { msg1: '**msg1**', msg2: '<b>**msg2**</b>', msg3: '<b>**msg3**</b>', msg4: '**msg4**', }, methods: { action:function () { this.msg4 = '**新的msg4**' }, action1:function () { this.msg3 = '**新的msg3**' }, } }) </script>
事件指令
<body> <div id="app"> <!--v-on:事件名="函数名"，这种表示可以进行简写：@事件名="函数名"，也就是将v-on:简写成一个@代替--> <p v-on:click="action1">{{ msgs[0] }}</p> <p @click="action2">{{ msgs[1] }}</p> <!--事件的传参--> <ul> <li @click="liAction(100)">列表组1</li> <li @click="liAction(200)">列表组2</li> <li @click="liAction(300)">列表组3</li> </ul> <!--鼠标事件对象：直接写函数名，默认将鼠标事件对象传入--> <div @click="func1">func1</div> <!--鼠标事件对象，一但添加()，就必须手动传参，$event就代表鼠标事件对象--> <div @click="func2($event, 'abc')">func2</div> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 挂载点 data: { msgs: ['111', '222'] }, methods: { action1:function () { alert(this.msgs[0]) }, action2:function () { alert(this.msgs[1]) }, liAction:function (num, msg) { console.log(num, msg) }, func1:function (ev) { console.log(ev) }, func2:function (ev,msg) { console.log(ev); console.log(msg) }, } }) </script>
属性指令
<style> .rDiv { width: 100px; height: 100px; background-color: red; } .gDiv { width: 100px; height: 50px; background-color: blue; } .br { border-radius: 50%; } </style> </head> <body> <div id="app"> <!--属性指令：用vue绑定属性，将属性内容交给vue处理--> <!--语法：v-bing:属性名="变量" (v-bind:可以简写为:)--> <p class="" style="" v-bind:sgt="oo" :jason="xx"></p> <!--class 属性--> <p :class="c1" @click="action1"></p> <!--多个类名--> <p :class="[c1, c2]"></p> <!--'br'固定写死的数据，不再是变量--> <p :class="[c1, 'br']"></p> <!--style属性--> <!--一个变量：该变量的值为{}，{}内部完成了一个个属性的设置--> <p class="gDiv" :style="s1">12345</p> <!--一个{}，{}内是一个个属性，由一个个变量单独控制--> <p class="gDiv" :style="{fontSize: fs, color: c}">67890</p> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', // 挂载点 data: { oo: 'SGT', xx: 'JASON', c1: 'rDiv', c2: 'br', s1: { fontSize: '30px', color: 'black' }, fs: '10px', c: 'orange' }, methods: { action1:function () { if (this.c1=='rDiv'){this.c1='gDiv'} else{this.c1='rDiv'} } }, }) </script>
if条件指令
通过变量控制元素或组件的渲染与否，即控制相关元素的销毁与重建
<body> <div id="app"> <!-- 条件指令 v-show | v-if--> <!-- v-show：消失是以 display: none渲染 --> <div class="div" v-show="s1">123</div> <!-- v-if：消失时不会被渲染 --> <div class="div" v-if="s2">456</div> </div> <script src="vue.js"></script> <script> var app = new Vue({ el: '#app', data: { s1: false, s2: true } }) </script> </body>
#).v-show也用于根据条件控制元素的显示与隐藏，不同的是，v-show无论取何值，元素都会被渲染到dom结构，v-show的取值只是影响元素的display取值。
#).v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-model双向绑定指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"> </div> <script src="vue.js"></script> <script> let app = new Vue({ el: '#app', data:{ message: 'Hello Vue!' } }) </script> </body> </html>
