Vue学习-2

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: Vue的十大指令

如何在HTML绑定数据

绑定纯html

  • 将标签页渲染出来,而不是显示标签出来;
  • 直接在标签中添加v-html=你要改变的数据名;
 <div id="app" v-html="name"></div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
     name:"<strong>前端</strong>"
    }
 });
 </script>

显示出来的就是加粗的前端

绑定属性

  • 需要借助一个v-bind指令,后面写你要添加的属性
  • 可以简写省略v-bind,直接:+绑定的属性就可以;
<div>
<a :href="link">百度</a>
</div>
<script>
   let app = new Vue({
      el:"app",
      data:{
        link:"http://baidu.com"
      }
    });
</script>

注意一

  • 当渲染属性值为布尔值的时候(true)或者(false),效果就是不一样了,并不是简单的true或者false渲染出来,而是当值为false的时候,属性会被移除;
<div id="app">
   <!--我们用缩写的语法-->
   <button :disabled="dis_true">
      我是true
   </button>
   <button :disabled="dis_false">
      我是false
   </button>
 </div>

 <script>
 let app = new Vue({
    el:"#app",
    data:{
      dis_true:true,
      dis_false:false
    }
 });
 </script>
  • 我们通过v-bind指令的缩写,给两个button标签属性,设置一个为true,一个为false,效果是
<button disabled="disabled">我是true</button>
<button>我是false</button>  /*属性直接被移除*/

注意二

  • 支持JavaScript表达式
 <div id="app">{{ num+3 }}</div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        num:2
    }
 });
 </script>
  • 渲染出来结果为5 ;
<div id="app">{{ ok ? 'yes':'no' }}</div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        ok:true
    }
 });
 </script>
  • 渲染出来结果为yes

虽然vue支持JavaScript表达式运算,只能在简单的情况下才会这样玩,运算比较复杂的时候,一定要用vue的computed属性进行计算;

总结

  • 在视图绑定数据的方法,Mustache语法(双大括号语法),绑定纯HTML,绑定属性,支持JavaScript表达式写法,以及表达式写法和computed区别;

十个指令

v-text指令

  • 用于更新标签包含的文本,作用和大括号一样,只是在标签中绑定
<div id="app">
    <p v-text="msg"></p>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        msg:'hello,vue'
    }
 });
 </script>
<p v-text="msg"></p>
<p>{{msg}}</p>

v-show指令

  • 元素的显示和隐藏,控制display css属性
  • 取值为true/false.分别对应着显示/隐藏
 <div id="app">
    <p v-show="show1">我是true</p>
    <p v-show="show2">我是false</p>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        show1:true,
        show2:false
    }
 });
 </script>
  • 第一个p标签的v-show,元素正常显示;第二个p标签的v-show设置为false,不显示,解析代码为
<p>我是true</p>
<p style="display:none;">我是false</p>

v-if指令

  • 取值也是true或者false,控制元素是否被渲染出来;
<div id="app">
    <p v-if="if_1">我是true</p>
    <p v-if="if_2">我是true</p>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        if_1:true,
        if_2:false
    }
 });
 </script>

解析效果为

  • 看到了吧,设置为true的

    标签,成功渲染出来,而设置为false的

    标签,直接被一行注释代替了,并没有被解析渲染出来。

  • 与v-show的区别也就显示出来了,

注意 : 在需要频繁切换显示/隐藏,就用v-show,运行后不太可能需要切换显示/隐藏,就用v-if

v-else指令

  • if和else在编程中一般都是成对出现的,在vue中也不例外,它没有对应的值,但是要求一个兄弟节点必须使用v-if指令,也是,没有if,哪有else;
<div id="app">
    <p v-if="if_1">我是if</p>
    <p v-else>我是else</p>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        if_1:false
    }
 });
</script

下面说完我想吐槽下用markdown记笔记插图片的梗,很无语.

  • 只有第二个

    被渲染出来了,第一个

    标签由于v-if指令的值为false,直接被忽视了,不渲染;

  • 同理,一旦第一个标签的v-if指令值为true,被忽视的就是第二个

    .v-if和v-else只有一个会被渲染出来;

java

见第一个最上面.


v-for指令

  • 有时候data中存放的数据不是简单的数字或者字符串,而是数组array类型,这个时候想把数组的元素显示在视图上,就需要用到vue提供的v-for指令,来实现列表的渲染;
div id="app">
   <div v-for="item in list">{{item}}</div>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        list:['Tom','John','Lisa']
    }
 });
 </script>
  • item表示每个元素,我理解的相当于遍历了
//解析出来为三个div, 其中包含的值分别是数组中的元素;
<div>Tom</div>
<div>John</div>
<div>Lisa</div>
页面中渲染为:
Tom
John
Lisa

想拿索引?

也很简单,我们稍微改动下代码,把html部分的代码修改为

 <div id="app">
   <div v-for="(item,index) in list">
       {{index}}.{{item}}
   </div>
 </div>
  • 在循环过程中,我们不但要拿到数组的每个元素item,我们还获取每个元素的索引,写法如上,循环的时候加上(index,item)

效果图/源码图为:

0.Tom           <div>0.Tom</div>
1.John          <div>1.John</div>
2.Lisa          <div>2.Lisa</div>

提醒:v-for指令除了可以迭代数组,还可以迭代对象和整数。 (这里我没测试,有兴趣的可以测试告诉我哈哈)

v-bind指令

v-on指令

  • v-on 指令相当于绑定事件的监听器,绑定的事件触发了,可以指定事件的处理函数,在前面vue一种介绍了methods选项的时候,用到了v-on(我记得),这里还是配合methods演示
<div id="app">
    <button v-on:click="say">点击</button>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    methods:{
        say(){
            console.log('hello');
        }
    }
 });
 </script>

此外,如果你想给处理程序say( )传参数,也是可以的,用法跟普通的方法一致。

 <div id="app">
   <button v-on:click="say('Tom')">
        点击
  </button>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    methods:{
      say(name){
        console.log('hello,'+name);
      }
    }
 });
 </script>

渲染出来的是:hello,Tom

v-model指令

  • 一般用在表单输入,它帮助我们实现表单控件和数据的双向绑定,相对以前手动更新Dom,是不是很好;
<div id="app">
    <input v-model="msg" type="text">
    <p>你输入:{{ msg }}</p>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        msg:''
    }
 });
 </script>
  • 只要给input控件添加v-model指令,并关联的数据msg,我们就可以轻松的把用户输入的内容都绑定在msg上,是不是感受到了MVVM带来的快感哈哈哈

v-once指令

  • 最后一个v-once指令,它的特点是只渲染一次,后面元素中的数据在更新变化都不会重新渲染;
<div id="app">
   <input v-model="msg"  type="text">
   <p v-once>你输入:{{ msg }}</p>
 </div>
 <script>
 let app = new Vue({
    el:"#app",
    data:{
        msg:'hello,公众号的同学们'
    }
 });
 </script>
  • 修改了

    标签,增加了v-once指令;

  • msg的初始值不再是空字符串;(这个我总忘,第一次渲染需要有内容的)
  • 由于msg有了初始值,第一次渲染的时候,input控件和

    标签都有了内容,由于

    标签我们增加了v-once指令.所以,后期我们更新msg值的时候,

    标签的内容不会改变;

总结

这节讲了

  • v-html
  • v-bind
  • v-text
  • v-show
  • v-if
  • v-else
  • v-once
  • v-model
  • v-on
  • v-for

十个指令你会了几个呢?是不是so easy? 都能看明白就是在实际开发中如何具体去应用了.


今日吐槽:

1. MarkDown

有的人应该知道,MarkDown引用的两种方式,(这里我笼统的归结为两种)

  • 本地和在线,本地都知道,哪天图片丢失了,或者没有上传就无法显示了,
    本地可以直接创建文件夹使用绝对路径,这里不多说.
  • 在线上传有很多种,什么GitHub啊 ,上传服务器之类的,base64转码啊(超级麻烦)总之就是为了获取在线图片的网址,反正就是很烦,可是又必须zheyan这样,Mac人家可以直接在线在线就上传到微博了,图床(好像这个插件自带的)具体是不是这两字我也不知道,没查,Windows不支持.,所以很郁闷,这里的图片我是上传到我微博,然后复制的地址,哪天微博dongtaish动态删了就没有了,所以在微博我备注上博客存图.很心塞......

2.代码格式

  • 在MarkDown上还支持vue格式的代码高亮显示,到这里jiubuzi就不支持了,全是白的,为了看着更突然清晰,手动一个个改成了java代码块风格,很是无无语,好了,吐槽完毕.

再见~

相关文章
|
1月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
6天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
41 1
vue学习第一章
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
30 1
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
29 1
|
1月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
32 1
|
1月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
1月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
1月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
38 1
vue学习第四章