VUE基本使用详解

news2024/10/5 23:28:12

一、VUE框架原理

1. 了解VUE框架

2. VUE框架原理

3. MVC设计模式

4. MVVM设计模式

二、引入VUE框架

1. 本地引入

2. 网络引入

三、安装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

文本相关
{{变量}}：插值，定义在标签里，让此处文本内容和变量进行绑定

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>

属性绑定
让元素属性的值和变量进行单向绑定，当属性值发生变化变量也发生改变

结构：

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>

双向绑定
定义在标签中，让控件的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>

事件绑定
绑定元素的事件，当条件满足触发时，会触发方法

如：点击事件(鼠标点击时触发)：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>

遍历
让元素显示数量和数组进行绑定，变量数组中每一个对象

结构：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>

判断
让元素的显示状态和变量进行绑定，结果为 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>