VUE框架详解入门

一、VUE框架原理

1. 了解VUE框架

2. VUE框架原理

3. MVC设计模式

4. MVVM设计模式

二、引入VUE框架

1. 本地引入

2. 网络引入

三、安装Vue插件

四、使用方式

1. 文本相关

2. 属性绑定

3. 双向绑定

4. 事件绑定

5. 遍历

6. 判断

一、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="data: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>

基本信息就这些，可以进行简单使用了