Vue学习-2

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 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代码块风格,很是无无语,好了,吐槽完毕.

再见~

相关文章
|
18天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
33 1
vue学习第四章
|
18天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
27 1
vue学习第九章(v-model)
|
18天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
32 1
vue学习第十章(组件开发)
|
23天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
24天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
24天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
23天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
31 3
|
23天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
42 2
|
24天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
25天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。