WEB——05.Vue

最新推荐文章于 2024-08-07 11:15:21 发布

qq_43929790

最新推荐文章于 2024-08-07 11:15:21 发布

阅读量111

点赞数

分类专栏： WEB 文章标签： java css3 vue.js

本文链接：https://blog.csdn.net/qq_43929790/article/details/124466018

版权

WEB 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

WEB——05.Vue

MVC设计模式：

实际上就是把前端实现一个业务功能的代码划分为3部分
Model：模型，指数据模型对应的是获取到数据的部分代码。
View：视图，指页面部分代码。
Controller：控制器，是把数据模型的内容展示到页面中的过程。
前端MVC设计模式的弊端：需要在Controller部分频繁进行DOM操作(遍历查找元素过程)会影响效率，从而影响用户的体验度。

M,V,VM设计模式

Model：模型，指数据模型对应的是获取到数据的部分代码。
View：视图，指页面部分代码。
VM：视图模型，将页面中可能发生改变的元素在内存中和某一个变量进行绑定，当变量的值发生改变时，会自动从内存中找到和变量对应的元素进行修改，不需要像MVC设计模式中每次进行遍历查找，从而提高了效率，提高了用户体验度。

VUE框架

VUE框架是基于MVVM设计模式的前端框架。
工作原理: Vue框架中的Vue对象是MVVM设计模式中的VM视图模型, 此对象负责将页面中改变的元素和data里面的变量进行绑定, 初始化时,变量的值是什么页面就显示成什么, 并且Vue对象会一直监听着data里面变量值得改变, 当值发生改变时,会自动找到与其绑定的元素并且让元素跟着发生改变,改变元素的过程是不需要程序员参与的, 从而提高了开发效率, 由于这个过程不需要频繁的进行DOM操作(遍历查找元素) 从而提高了执行效率.

引入前端三方框架的两种方式：

1.把框架文件下载到本地，复制到自己的工程中进行引入。

2.从CDN服务器直接引入到自己工程。

Vue常用命令

{{}}:插值，让此处的文本内容和变量进行绑定，不需要依赖某个标签存在
v-text=“变量”:让元素的文本内容和变量进行绑定，需要依赖标签
v-html=“变量”：让元素的标签内容和变量进行绑定

//初始Vue
body>
<div id = "app">
<h1>{{info}}</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:"#app",
      data:{info:"Hello Vue"}
    })
    setTimeout(function () {
      v.info = "值被修改了!"
    },2000);
  </script>

</body>

<div>
<!--{{变量}}:插值，让此处显示的文本和变量进行绑定-->
  {{info}}<b>{{info}}</b>
<!--  v-text 让元素的文本内容和变量进行绑定，必须依赖某个标签-->
  <p v-text="info"></p>
<!--  v-html让元素的标签内容和变量进行绑定-->
  <p v-html="info"></p>
</div>
<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:"文本测试<b>加粗标签</b>"
    }
  })

v-bind:属性名=“变量”：让元素的某个属性的值和变量进行绑定，简写把v-bind去掉

属性绑定
<div>
<!--  :属性名=变量 让元素的属性和变量进行绑定-->
  <input type="text" v-bind:value="info">
  <input type="text" :value="info">
  <a :href="url">超链接</a>
  <img :src="imageName" alt="">

</div>
<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:"../b.jpg"
    }
  })
</script>

v-model=“变量”：让控件的value属性和某个变量进行双向绑定，双向绑定：变量会影响页面显示的内容，页面元素的内容改变也会影响变量，当需要从代码获取控件的值使用双向绑定。

双向绑定
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:事件名=“方法”，绑定元素的事件，方法需要声明在Vue对象里面的methods属性里面，简写是

@事件名=“方法”
- @click点击事件
- @change 值改变事件
- @blur失去焦点事件

idea中安装Vue插件

File->Settings->Plugins 搜索Vue 如图所示 , 安装完之后重启idea

idea中添加自定义模板代码

File->Editor->Live Templates

<body>
<div>
  <input type="button" value="按钮" @click="f()">
  <input type="button" value="按钮" v-on:click="f()">
  <input type="text" @blur="b()">
  <select name="" @change="c()" v-model="city">
    <option >上海</option>
    <option >北京</option>
    <option>天津</option>
  </select>
</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:{
      city:""
    },
    methods:{
      f:function () {
        console.log("按钮点击了!");
      },
      b(){
        console.log("编辑完成!")
      },
      c(){
        console.log("值改变了！"+v.city)
      }
    }
  })
</script>
</body>

猜数字Vue
<div>
  <input type="text" placeholder="请输入1-100之间的整数" v-model="num">
  <input type="button" value="猜一猜" @click="f()">
  <h1>{{info}}</h1>
</div>

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
<script>
  let x = parseInt(Math.random()*100)+1;
 let v = new Vue({
    el:"div",
    data:{
      num:"",
      info:""
    },
    methods: {
      f(){
        if (v.num>x){
          v.info ="猜大了!"
        }else if(v.num<x){
          v.info = "猜小了!"
        }else {
          v.info = "恭喜你，猜对了！"
        }
      }
    }
  })
</script>
</body>

计算器Vue
<body>
<div>
  <input type="text" v-model="n1">
  <input type="text" v-model="n2">
  <input type="button" value="加" @click="f('+')">
  <input type="button" value="减" @click="f('-')">
  <input type="button" value="乘" @click="f('*')">
  <input type="button" value="除" @click="f('/')">
  <h1>{{result}}</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:{
      n1:"",
      n2:"",
      result:""
    },
    methods:{
      f(x){
        v.result = eval(v.n1+x+v.n2)
      }
    }
  })
</script>
</body>

v-for=“(变量,i) in 数组变量”；让元素的显示数量和数组进行绑定，同时遍历数组中的每一个对象,变量代表的是数组中的每一个对象，i代表的是当前遍历的下标。
v-if=“变量”,元素的显示状态和变量进行绑定，true显示，false不显示(删除元素)
v-else和v-if指令结合使用，显示状态和v-if的元素取反
v-show=“变量”,元素的显示状态和变量进行绑定，true显示，false不显示(通过样式隐藏了元素),需要元素频繁切换显示状态使用v-show的执行效率会高于v-if

循环遍历员工列表
<body>
<div>
  <h1>汽车列表</h1>
  <table border="1">
    <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>
</div>

<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:{
      arr:[{name:"比亚迪",price:500000,type:"轿车"},
        {name:"大众",price:400000,type:"轿车"},
        {name:"北京现代",price:500000,type:"轿车"},]
    }
  })

</script>
</body>

显示隐藏元素
<body>
<div>
  <h1 v-if="visible">刘德华</h1>
  <h1 v-else>张学友</h1>
  <h2 v-show="visible">刘德华</h2>
</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:{
      visible:true
   }
  })
</script>

idea中安装Vue插件

File->Settings->Plugins 搜索Vue 如图所示 , 安装完之后重启idea

idea中添加自定义模板代码

File->Editor->Live Templates

idea中安装element插件

得到element.jar 文件
File->Settings->Plugins 如下图操作找到element.jar文件最后重启idea即可

qq_43929790

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
WEB——05.Vue

WEB——05.VueMVC设计模式：实际上就是把前端实现一个业务功能的代码划分为3部分Model：模型，指数据模型对应的是获取到数据的部分代码。View：视图，指页面部分代码。Controller：控制器，是把数据模型的内容展示到页面中的过程。前端MVC设计模式的弊端：需要在Controller部分频繁进行DOM操作(遍历查找元素过程)会影响效率，从而影响用户的体验度。M,V,VM设计模式Model：模型，指数据模型对应的是获取到数据的部分代码。Vie
复制链接

扫一扫