什么是VUE

想学java的小张

于 2024-05-11 20:49:18 发布

阅读量535

点赞数 7

文章标签： vue

本文链接：https://blog.csdn.net/xiaoleshishabi/article/details/138729199

版权

一、什么是VUE（官网：https://cn.vuejs.org/）
官方给出的概念：Vue(读音/vjuː/，类似于 view)是一套用
于构建用户界面的前端框架
渐进式的JavaScript 框架

二、VUE的特点
易用：基础只需HTML、CSS、JAvaScript
灵活：可以只在一个库和一套完整框架之间伸缩自如（渐进式）
高效：运行大小20kb，超快的虚拟DOM

Vue框架的特性主要是数据驱动试图，双向数据绑定
▲面试：为什么要使用虚拟DOM？
Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发
生变化时，其实就是对应某个DOM节点发生了变化
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，
若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，
而是将这10次更新的diff内容保存到本地一个JS对象中，最终将
这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量
欣知大数据
欣知大数据—孙也
无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的
更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对
象的速度显然要更快，等更新完成后，再将最终的JS对象映射成
真实的DOM，交由浏览器去绘制。
三、vue的底层原理—MVVM模式
MV
UI组件，ViewModel是View和Model层的桥梁，数据会绑定到
viewModel层并自动将数据渲染到页面中，视图变化的时候会通
知viewModel层更新数据。
四、Vue的优势
 轻量级：vue只关注视图层，是一个构建数据的视图集
dom，就性能而言，vue存在很大的优势。
五、vue初体验
VUE的三部曲 引包、留坑、实例化
 引包
1、直接引入<script></script>
2、CDN:内容分发网络（将一套东西放服务器里面让别人
去访问）
3、Npm下载：Np
关于初始化的选择器：
1.选择器只能选中一个范围，默认选择第一个，所以建议使用id
选择器
2.根标签不能用body（el挂载不能用Boby也不可以用HTML），一
般都在body里面放一个根标签
3.能够使用vue的标签只能是双目标签
4.
模板引擎的本质: 正则的替换
目的: 为了增强html功能

Vue模板引擎的用法：
1. {{数据绑定}}
2. {{简单计算}}
3. {{简单逻辑运算}}（三元运算）
4. {{做简单js判断}}
注意：不能写语句、不能解析html渲染、不能放在在属性身上

v-text 
设置标签的内容，元素的innerText 必须是双标签
默认会替换标签内原来的全部内容，使用｛｛｝｝可替换指
定内容
支持内部写表达式

代码：

<div id="box">
<span>奥特曼打小怪兽：{{message}}</span><br>
<span v-text="number">520</span><br>
<span v-text="address"></span><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
message:"我是小仙女",
number:"love_251314",
address:"天上人间"
}
})
</script>

</scrip
n:事件名=
unction
w:true
}
em子项，
海","杭州"

 
v-html
 设置标签的内容，元素的innerText 必须是双标签
 会解析HTML 标签

代码：

<div id="box">
<span>奥特曼打小怪兽：{{message}}</span><br>
<span v-html="number">520</span><br>
<span v-text="address">520</span><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
message:"我是小仙女",
number:"<a href='https://www.imooc.com/'>好好学习</a>",
address:"<a href='https://www.imooc.com/'>天天向上</a>"
}
})
</script>

二、属性绑定指令
 
v-bind
 语法：V-bind:属性名=“挂载的数据”
 简写 ：属性名=”挂载的数据”
 解析属性,单向的数据绑定
代码：

<div id="box">
<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc" :title="imgTitle+'！！！'"alt="">
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
imgSrc:"1.PNG",
imgTitle:"奶茶"
}
})
</script>

三、事件绑定属性
 
v-on
 语法：v-on:事件名=”方法（）”
 为元素绑定事件
 绑定的方法在methods 属性中
 可以在方法内部通过this直接获取data中的值
 v-on可以简写成 @
 事件绑定并且传参数
代码：

<div id="box">
<input type="text" value="v_on单击" v-on:click="doIt()">
<input type="text" value="v_on简写单击" @click="doIt()">
<input type="text" value="v_on双击" @dblclick="gai()">
<input type="text" value="回车键" @keyup.enter="sayHi">
<br>
<span>{{message}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
message:"我是小仙女",
change:"奥特曼打小怪兽！"
},
methods:{
doIt:function () {
this.message+="宝藏女孩！";
},
gai:function () {
this.message=this.change;
alert("成功接收！");
},
sayHi:function(){
Alert(“你好！！！”);
}
}
})
</script>

四、条件渲染属性—显示切换
 
v-show
 条件渲染,判断是否隐藏,true是现实false是隐藏
 原理是修改display属性
代码

<style>
.box{
width:100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="box">
<button @click="isShow=!isShow">点击</button>
<div class="box" v-show="isShow"></div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
a:4,
isShow:true
},
methods:{
show(){
this.isShow=!this.isShow;
}
}
})
</script>

 
v-if，v-else 判断是否插值
 根据条件的真假判断是否显示数据
 原理是append remove
代码：

<body>
<div id="box">
<input type="button" value="切换显示" @click="toggleIsShow">
<p v-if="isShow">小孙小孙发财提薪</p>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
new Vue({
el:"#box",
data:{
isShow:false
},
methods:{
toggleIsShow:function(){
this.isShow=!this.isShow;
}
}
})
</script>

五、列表渲染指令
 
v-for 列表渲染
 语法：v-for=“item in数组”
 根据数据生成列表结构，隐式遍历
 可以通过此语法获取到item子项，也可以获取到索引index
欣知大数据
代码：

<div id="app">
<button @click="add">点击添加</button>
<button @click="sub">点击删除</button>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
arr:["上海","杭州","深圳","无锡","苏州"],
},
methods:{
add:function () {
this.arr.push("巴黎");
},
sub:function () {
this.arr.shift();
}
}
})
</script>

六、双向数据绑定指令
 
v-model 控制表单产生数据，双向绑定数据
 设置或者获取表单元素的值
欣知大数据
代码：

<div id="box">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#box",
data:{
message:"欣知大数据",
}
})
</script>

想学java的小张

关注

7
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
什么是VUE

UI组件，ViewModel是View和Model层的桥梁，数据会绑定到。若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量。而是将这10次更新的diff内容保存到本地一个JS对象中，最终将。更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对。所以，用JS对象模拟DOM节点的好处是，页面的。象的速度显然要更快，等更新完成后，再将最终的JS对象映射成。 设置标签的内容，元素的innerText 必须是双标签。
复制链接

扫一扫