vue.js(1)内部指令学习笔记

vue.js(1)内部指令学习笔记

---

npm n install live-server -g

---

<div id="app">
    {{message}}
</div>

var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
//此为vue.js的基本模板

v-if&v-else&v-show

<div id="app">
    <div v-show='disappear'>设置display，是否隐藏</div>
    <div v-if='islogin'>登陆成功</div>
    <div v-else='islogin'>请登录</div>
</div>

v-if为true则执行登陆成功，为false显示请登录
v-show为true，就设置display，v-show为false就设置隐藏

v-for

    <ul>
        <li v-for='item of sortitem'>
            {{item}}
        </li>
    </ul>

v-for将显示sortitem.length个

• v-text

  <div id="app">
      <span v-text="message"></span><br/>
      <span v-html="msgHtml"></span>
  </div>
      var app=new Vue({
          el:'#app',
          data:{
              message:'hello Vue!',
              msgHtml:'<h2>hello Vue!</h2>'
          }
      })
  

  v-text就是要显示的纯文本
  v-html是要显示的html标签

  v-on:click

     本场比赛得分： {{count}}<br/>
     <button v-on:click="jiafen">加分</button>
     <button v-on:click="jianfen">减分</button><br>
          methods:{
              jiafen:function(){
                  this.count++;
              },
              jianfen:function(){
                  this.count--;
              }
          }
  

  v-on绑定事件，函数卸载methods中

  v-model

      <p>v-model  <input type="text" v-model='message'></p>
      <p>v-model.lazy  <input type="text" v-model.lazy='message'></p>
      <p>v-model.number  <input type="text" v-model.number='message'></p>
  

  v-model双向绑定，input输入框会改变message值，
  v-model.lazy省略空格，多个空格识别成一个
  v-model.number先输入数字就只能识别数字

  v-bind

  <div id="app">
      <img v-bind:src='imgsrc' width="200px"><br>
      <a :href='url'>jishupang</a><br>
      <div :class="className">1、绑定classA</div>
      <div :class='{classA:isOk}'>2,绑定class的判断</div>
      <div :class='[classA,classB]'>3,绑定class的数组</div>
      <div :class='isOk?classA:classB'>4,绑定class的3元判断</div>
      <hr>
      <div style="color:red;font-size:150%;">5、绑定style</div>
      <div :style="styleObject">6、用对象绑定style样式</div>
  </div>
      var app=new Vue({
          el:'#app',
          data:{
              imgsrc:'http://jspang.com/wp-content/uploads/2018/02/bbbb.jpg',
              url:'http://jspang.com/category/learn/vue2/',
              className:'classA',
              classA:'classA',
              classB:'classB',
              isOk:false,
              styleObject:{
              fontSize:'24px',
              color:'green'
          }
          }
      })
  

  动态绑定src的值，v-bind:src,缩写:src

  3,绑定class的数组
  绑定两个类值
  6、用对象绑定style样式
  绑定style的对象

  其他指令

  [v-cloak] {
  display: none;
  }
  </style>
  <div id="app">
      <div v-pre>{{message}}</div>
      <div v-cloak>
          {{ message }}
        </div>
        <div v-once>{{message}}</div>
        <input type="text" v-model='message'>
        <div>{{message}}</div>
  

  <div v-pre>{{message}}</div>  
  

  这时并不会输出我们的message值，而是直接在网页中显示{{message}}

  v-cloak指令
  在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用.

  v-once指令
  在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。