Vue学习-2-阿里云开发者社区

开发者社区> 一朵王小花> 正文

Vue学习-2

简介: 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代码块风格,很是无无语,好了,吐槽完毕.

再见~

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
vue学习笔记1-基本知识
1.npm 安装node.js的时候会一起安装npm包管理器,能够解决nodejs代码部署问题,常见使用如下: 允许用户从npm服务器下载别人编写的第三方包到本地应用允许用户从npm服务器下载并安装别人编写的命令行程序到本地使用允许将自己编写的包或命令上传到npm服务器上供别人使用 新版的nodejs已经集成npm,安装好nodejs之后使用npm -v命令检查是否安装成功。
857 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2734 0
Vue学习-1
为什么选择Vuejs 预读:为了满足当前移动webApp项目的开发需求,MVVM框架诞生,而VUEJS 便是这样一种js框架,其两大核心:数据驱动和组件化 为了解决webApp这些体验和开发上的不足,使用一个MVVM框架VUELS;
1432 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11798 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
11924 0
新手入门指导:Vue 2.0 的建议学习顺序
起步 1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。 2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 ,把教程里的例子模仿一遍,理解用法。
1352 0
VUE学习笔记(二)
以记录学习vue.js的路程,第二篇
153 0
VUE指令列表学习记录
VUE指令列表学习记录
21 0
3
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载