Vue学习-2

如何在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-bind指令的作用和用法,动态绑定DOM元素的属性,比较常见的如:标签的href属性,标签的src属性
• 这里就不说了

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

再见~