VUE框架 详解入门
vue框架快速入门到实操
目录
一、VUE框架原理
1. 了解VUE框架
vue 框架 是基于MVVM设计模式的前端框架,其中的Vue对象是MVVM设计模式中的VM视图模型。
2. VUE框架原理
Vue对象将页面中 要改变的元素 和 data中变量 进行绑定,绑定后它会一直监听data中变量值的改变,当值发生改变时,会自动找到与其绑定的元素并且让元素跟着发生改变,改变元素的过程不需要人工干预,提高了开发效率,而且这个过程不需要像 JavaScript 那样频繁DOM操作去改变页面结构,只是监听一片区域,提高了执行效率。
3. MVC设计模式
把一个业务实现分成三部分:
Model:模型,数据模型 是服务器获取到数据的部分代码
View:视图,页面部分代码
Controller:控制器,把数据模型中的数据,通过实现 展示到页面中
有一个缺点,需要频繁DOM操作,对文档对象模型,频繁全部扫描,如果页面内容多,扫描效率低
4. MVVM设计模式
Model:模型,数据模型 是服务器获取到数据的部分代码
View:视图,页面部分代码
VM:视图模型,它会将页面可能发生改变的元素和变量进行绑定,当变量改变时 元素的值也会改变,不需要频繁扫描,提高了效率和用户体验。
二、引入VUE框架
1. 本地引入
把框架文件下载到本地 通过 JS外部引入中用本地连接 导入实现。
<script src="js/vue.min.js"></script>
2. 网络引入
从服务器直接引入项目,通过 JS外部引入中用网络路径 导入实现
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
三、安装Vue插件
File -> Settings -> Plugins 搜索Vue ,安装完之后重启idea
完成上面准备工作就可以用Vue框架 完成开发工作了。
四、使用方式
1. 文本相关
{{变量}}:插值,定义在标签里,让此处文本内容和变量进行绑定
v-text="变量" :定义在标签中,让元素的文本内容和变量进行绑定
v-html="变量":定义在标签中,让元素的标签内容和变量进行绑定
<body>
<div>
<!--{{变量}}:插值,让此处显示的文本和变量进行绑定-->
{{info}}<b>{{info}}</b>
<h1>{{info}}</h1>
<!--v-text 让元素的文本内容和变量进行绑定,必须依赖某个标签-->
<p v-text="info"></p>
<!--v-html让元素的标签内容和变量进行绑定-->
<p v-html="info"></p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el:"div",
data:{
info:"文本<b>加粗</b>"
}
})
</script>
</body>
2. 属性绑定
让元素 属性的值 和 变量进行 单向绑定,当属性值发生变化 变量也发生改变
结构:
v-bind:属性名=“变量”;
或 :属性名="变量";
<body>
<div>
<!--:属性名=变量 让元素的属性和变量进行绑定-->
<input type="text" :value="info">
<input type="text" v-bind:value="info">
<a :href="url">超链接</a>
<img :src="imageName" alt="">
</div>
<!--引入网络版的Vue框架 Vue插件才会正常工作-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
new Vue({
el: "div",
data: {
info: "属性绑定",
url:"http://www.baidu.com",
imageName:"head.jpg"
}
})
</script>
</body>
3. 双向绑定
定义在标签中,让控件的value值和变量进行双向绑定,变量影响页面 同时页面的改动也会影响变
结构:v-model="变量"
<body>
<div>
<!--v-model="变量"让控件的value值和变量进行双向绑定,变量影响页面 同时页面的改动也会影响变量-->
<input type="text" v-model="info">
{{info}}
<h1>注册表单</h1>
<form action="">
用户名:<input type="text" v-model="user.username"><br>
密码:<input type="password" v-model="user.password"><br>
</form>
</div>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
let v = new Vue({
el: "div",
data: {
info: "双向绑定",
user:{
username: "",
password: ""
}
}
})
</script>
</body>
4. 事件绑定
绑定元素的事件,当条件满足触发时,会触发方法
如:
点击事件(鼠标点击时触发):v-on:click="方法" 或 @click="方法"
<div>
<input type="button" value="按钮1" @click="f()">
<input type="button" value="按钮2" v-on:click="f()">
</div>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
let v = new Vue({
el: "div",
data: {},
methods: {
f: function () {
console.log("按钮点击了");
}
}
})
</script>
</body>
5. 遍历
让元素显示数量和数组进行绑定,变量数组中每一个对象
结构:v-for="(变量,i) in 数组变量" --- i 是下标
<body>
<table border="1">
<caption>汽车列表</caption>
<tr>
<th>编号</th><th>品牌名称</th><th>售价</th><th>类型</th>
</tr>
<tr v-for="(car,i) in arr">
<td>{{i+1}}</td>
<td>{{car.name}}</td>
<td>{{car.price}}</td>
<td>{{car.type}}</td>
</tr>
</table>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
let v = new Vue({
el:"table",
data:{
arr:[{name:"比亚迪汉",price:250000,type:"轿车"},
{name:"特斯拉m3",price:230000,type:"轿车"},
{name:"蔚来ES8",price:550000,type:"SUV"}]
}
})
</script>
</body>
6. 判断
让元素的显示状态和变量进行绑定,结果为 true显示,false不显示
结构:v-if = ”变量“ 和 v-else
<body>
<div>
<!--v-if="变量" 让元素是否显示和变量进行绑定, true显示 false不显示(删除了元素)-->
<h1 v-if="isVisible">刘德华</h1>
<!--v-else和v-if结合使用 和上面条件取反-->
<h1 v-else>张学友</h1>
</div>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
let v = new Vue({
el:"div",
data:{
isVisible:true
}
})
</script>
</body>
基本信息就这些,可以进行简单使用了
更多推荐
所有评论(0)