Vue指令学习 | 零基础入门

简介: Vue指令学习 | 零基础入门

MVVM

  • M:模型(Model) :对应 data 中的数据


  • V:视图(View) :模板


  • VM:视图模型(ViewModel) : Vue 实例对象
    Tip:
    V 视图可以 与 VM视图模型 的代码结合书写

14233676bcfd42959a6cdce84caafce1.jpeg

b01d73cab042496f85710633f10f0f81.png

el: 挂载点

el作用是为vue实例提供挂载元素,指明Vue实例的挂载目标

data: 数据

data选项可以定义数据,这些数据可以绑定到实例对应的模板中


methods: 方法

<div id="app">
        <p>{{ showInfo() }}</p>
</div>
<script>
        var vm = new Vue({  //实例化vue对象
            // el属性:指定程序界面
            // data属性:指定程序使用数据
            el: '#app',
            data: {
                name:'wei_shuo',
                url:'www.csdn.net'
            },
            methods:{
                showInfo:function(){
                    //return this.$data.name + ":" + this.url;    两种写法
                    return this.name + ":" + this.url;
                }
            }
        });
 </script>
// 页面显示 wei_shuo : www.csdn.net

指令

格式 指令:参数.修饰符=“表达式(变量)” 指令:参数=“表达式(变量)”

v-text

定义纯文本

<div id="app">
  <h3 v-text="name"></h3>
    <h3> {{ name }} </h3>   //v-text="name"的缩写
</div>
<script>
    var  app = new Vue({
        el:"#app",
        data:{
            name:"周杰伦"
        }
    });
</script>
// 页面显示 周杰伦

v-html

定义纯文本,且可以编译识别html标签

<div id="app">
  <h3 v-html="name"></h3>
</div>
<script>
    var  app = new Vue({
        el:"#app",
        data:{
            name:"<h1>周杰伦</h1>"
        }
    });
</script>
// 页面显示 周杰伦

v-html 和 v-text 区别

v-text无法编译识别html标签,而html可以编译识别

<div id="app">
    <p v-text="name1"></p>
    <p v-html="name2"></p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            name1:"<h1>周杰伦</h1>",
            name2:"<h1>周杰伦</h1>"
        }
    });
</script>
// 页面显示 name1 :<h1>周杰伦</h1>   name2 : 周杰伦

v-model

  • v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定它会根据控件类型自动选取正确的方法来更新元素
  • v-model = v-bind + v-on
  • 获取和设置表单元素的值(双向数据绑定)
  • 绑定数据 -----表单元素的值(同步更新)
  <div id="app">
    <!-- 输入框内容修改,message也修改,修改message,input内容也修改,双向绑定 -->
    <input type="text" v-model="message">{{message}}
  </div>
  <script>
    const app = new Vue({
      el:"#app",
      data:{
        message:"wei_shuo"
      }
    })
  </script>
    <div id="app">
<!--        双向绑定-->
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
        <input type="button" value="修改message" @click="setM">       
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"wei_shuo"
            },
            methods:{
                getM:function (){
                    alert(this.message)         //创建getM方法验证,v-model是否双向绑定
                },
                setM:function (){
                    this.message = "lishun";    //创建setM方法验证,v-model是否双向绑定
                }
            },
        })
    </script>

v-on

  • v-on指令作用是为元素绑定事件
  • v-on指令可以简写为@:on
  • 绑定的方法在methods中
  • 方法内部通过this关键字访问定义在data中的数据
<div id="app">
    <div class="inpute-num">
        <button @click="sub">
            -
        </button>
        <span>{{ num }}</span>
        <button @click="add">
            +
        </button>
    </div>
</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            num: 1
        },
        methods: {
            add: function () {
                // console.log('add')
                if (this.num < 10) {
                    this.num++;
                } else {
                    alert('别点了,最大了')
                }
            },
            sub: function () {
                // console.log('sub')
                if (this.num > 0) {
                    this.num--;
                } else {
                    alert('别点了,最小了!')
                }
            }
        }
    })
</script>

v-on事件修饰符

  • 事件绑定的方法写成函数调用的形式,可以传入自定义参数
  • 定义方法时,需要定义形参来接收传入的实参
  • 事件的后面跟上 .修饰符 可以对事件进行限制
  • .enter可以限制触发的按键为回车
    <div id="app">
      <input type="button" value="点击" @click="doIT(666,'老铁')">
<!--      输入文字触发方法-->
<!--      <input type="text" @keyup="sayHi"> -->
            输入文字触发方法
            <input type="text" @keyup.enter="sayHi">
    </div>
    <script>
      var app = new Vue({
        el:"#app",
        methods:{
          doIT:function (p1,p2){
            console.log("做IT");
            console.log(p1);
            console.log(p2);
          },
          sayHi:function (){
            alert("吃了没")
          }
        }
      })
    </script>

v-show

切换元素的显示状态 true显示 false隐藏

<div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow"><br>
        <img v-show="isShow" src="img/monkey.png" alt="">
</div>
<script>
        const app = new Vue({
        el: '#app',
        data: {
            isShow: false,
            age: 17
            },
            methods: {
                changeIsShow: function () {
                    this.isShow =! this.isShow;   //通过调用对isShow的值进行取反
                }
            }
        })
    </script>

v-bind

  • v-bind作用:动态绑定属性
  • 除了内容需要动态决定,属性我们也希望动态绑定 比如a元素的href属性、img元素的src属性
<div id="box">
        <img v-bind:src="url">
    </div>
    <script>
      let myDate = {
          url : 'images/00.jpg'   //绑定图片地址
      };
      let demo = new Vue({
        el : '#box',
        data : myDate
      });
    </script>

条件判断

v-if

<div id="app">
    <div v-if="score>=90">
        wei_shuo入选CSDN最热博主
    </div>
</div>
<script>
    var demo = new Vue({
        el: '#app',
        data:{
            score:90  //分数
        }
    })
</script>
// 页面显示 wei_shuo入选CSDN最热博主

v-else

搭配 v-if 使用

<div id="app">
    <div v-if="score>=90">
        wei_shuo入选CSDN最热博主
    </div>
    <div v-else>
        你说得对
    </div>
</div>
<script>
    var demo = new Vue({
        el: '#app',
        data:{
            score:80  //分数
        }
    })
</script>
// 页面显示 你说得对

v-for

  • 根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是(item,index) in 数据

案例:实现菜名添加和删除

<div id="app">
      <input type="button" value="添加数据" @click="add">
      <input type="button" value="删除数据" @click="remove">
      <ul>
        <li v-for="(item,index) in arr">
          {{ index + 1}} wei_shuo:{{ item }}
        </li>
      </ul>
      <h2 v-for="item in vegetables" v-bind:title="item.name">
        {{item.name}}
      </h2>
    </div>
    <script>
      var app = new Vue({
        el:'#app',
        data:{
          arr:["北京","广州","上海","深圳"],
          vegetables:[
            {name:"番茄炒鸡蛋"},
            {name:"鸡蛋炒番茄"}
          ]
        },
        methods:{
          add:function (){
            this.vegetables.push({name:"花菜炒蛋"}) //创建添加方法
          },
          remove:function (){
            this.vegetables.shift()     //创建删除方法
          }
        }
      });
    </script>

v-if 和 v-show 区别

v-if 和v-show 实现的功能类似,但是两者也有着本质的区别


在进行 v-if 切换时,因为v-if 中的模板可能包括数据绑定或子组件,所以Vue.js会有一个局部编译/卸载的过程。而在进行v-show切换时,仅发生了样式的变化。因此从切换的角度考虑,v-show 消耗的性能要比v-if小


v-if 是惰性的,如果在初始条件为 false 时,v-if 本身什么都不会做,而使用v-show 时,不管初始条件是真是假,DOM 元素总是会被渲染。因此从初始渲染的角度考虑,v-if 消耗的性能要比v-show 小。总的来说,v-if 有更高的切换消耗而v-show 有更高的初始渲染消耗。因此,如果需要频繁地切换,则使用v-show 较好;如果在运行时条件很少改变,则使用v-if 较好


目录
相关文章
|
21天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
111 1
|
1月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
1天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
10 1
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
57 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
52 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
46 1
vue学习第四章
|
2月前
|
JavaScript 前端开发 算法
vue学习第7章(循环)
欢迎来到瑞雨溪的博客,一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令,包括遍历数组和对象、使用key以及数组的响应式方法等内容,并附有综合练习实例。关注我,将持续更新更多优质文章!🎉🎉🎉
41 1
vue学习第7章(循环)