摘要
- 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>if条件指令
.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>
通过变量控制元素或组件的渲染与否，即控制相关元素的销毁与重建
<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 较好。
<!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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）