Vue.js学习使用心得

Posted 润润家的糖果波

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js学习使用心得相关的知识,希望对你有一定的参考价值。

一、初步了解

Vue.js是一套构建用户界面的渐进式框架,它只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,相当于javascript MVVM库,它是以数据驱动和组件化的思想构建的。

ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个html元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

  1. 定义View
  2. 定义Model
  3. 创建一个Vue实例或"ViewModel",它用于连接View和Model

在创建Vue实例时,需要传入一个选项对象,选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

<div id="vue_det">
    <h1>姓名 : {{name}}</h1>
    <h1>爱好 : {{hobby}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: #vue_det,
        data: {
            name: "糖果波",
            hobby: "吃喝玩乐",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.name+ "喜欢"+this.hobby;
            }
        }
    })
    vm.alexa= "1234"
    document.write(vm.alexa)
</script>
<div id="app">
    {{5+5}}<br>         //结果10
    {{ ok ? ‘YES‘ : ‘NO‘ }}<br>      //结果YES
    {{ message.split(‘‘).reverse().join(‘‘) }}      //结果BOONUR
</div>
    
<script>
new Vue({
  el: #app,
  data: {
    ok: true,
    message: RUNOOB
  }
})
</script>

二、data值改变

Vue实例的data属性指向exampleData,它是一个引用类型,改变了exampleData对象的属性,同时也会影响Vue实例的data属性。

当下面实例中变量data 进行改变时,定义实例中的data也会改变;当实例中的data改变时,变量data也会随之改变。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
    // 我们的数据对象
    var data = { site: "教程", url: "www.baidu.com", alexa: 10000}
    var vm = new Vue({
        el: #vue_det,
        data: data
    })
    // 它们引用相同的对象!
    document.write(vm.site === data.site) // true
    document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "aa"
    document.write(data.site + "<br>") // Runoob

    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
</script>

 

三、指令

(1)v-bind

    v-bind主要是綁定html标签中的一个或多个属性,例如 href,class,name,可以在其名称后面带一个参数,中间放一个冒号隔开。例:

<a v-bind:href="url">小飞飞的博客</a> //注意这里面的url不能直接写网址!,只能写变量传参数才可以
//错误示范:v-bind:href="http://blog.csdn.net/qq_37983691"

<script>
    new Vue({
        data:{
             url:"http://blog.csdn.net/qq_37983691"
        }
    })
<script>

     对于绑定class只能用如下绑定方式:

    第一个参数class的名称,第二个是一个boolean值,就是true,false, 如果是true的话这个绑定的class才生效啊!

v-bind:class=”{className:boolean}”

//错误的绑定方式:v-bind:class=”sb”,v-bind:class=”{bigSb}”

    以下例子是class绑定及监听事件改变属性。

<style>
  .aa {
    background: #444;
    color: #eee;
  }
</style>

<body>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <div id="app">
    <label for="r1">修改颜色</label>
    <input type="checkbox" v-model="class1" id="r1">
    <button v-on:click="changeColor">点击</button>
    <br>
    <br>
    <div v-bind:class="{‘aa‘: class1}">
      v-bind:class 指令
    </div>
  </div>

  <script>
    new Vue({
      el: #app,
      data: {
        class1: false
      },
      methods: {
        changeColor: function () {
          if (this.class1 == true) {
            this.class1 = false
          } else {
            this.class1 = true
          }
        }
      }
    });
  </script>
</body>

   另一种class绑定方法:

 

<div v-bind:class="classObject"></div>
<script>
       new Vue({
            el: #app,
            data: {
                  classObject: {
                         active: true,
                         text-danger: false
                  }
             }
    });
</script>

 

    绑定多个class:

 

<div v-bind:class="[activeClass, errorClass]"></div>
<script>
       new Vue({
            el: #app,
            data: {
                  activeClass: active,
                  errorClass: text-danger
                  }
             }
    });
</script>

   绑定id:

<div id="app">
    <div v-bind:id="‘list-‘ + id">List</div>   //id为"list-1"
</div>
    
<script>
     new Vue({
          el: #app,
          data: {
            id : 1
          }
     })
</script>

     绑定style:

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + ‘px‘ }"></div>
</div>
    
<script>
     new Vue({
          el: #app,
          data: {
               activeColor: red,
               fontSize: 30
          }
     })
</script>
<div id="app">
    <div v-bind:style="styleObject"></div>
</div>
    
<script>
     new Vue({
          el: #app,
          data: {
               styleObject: {
                    color: red,
                    fontSize: 13px
               }
          }
     })
</script>

(2)v-model

     v-model用于表单数据的双向绑定,v-model只能用在:<input>    <select>    <textarea>  <components> <checkbox> <radio>等表单数据中;

     在下面实例中,如果<p>中文本进行变化,<input>中的文本也会随之变化;反之亦然。

<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>
<script type="text/javascript">
    new Vue({
        el: #app,
        data: {
            message: 糖果波
        }
    })
</script>

(3)v-html

     v-html用来输出 html 代码。

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: #app,
  data: {
    message: <h1>糖果波</h1>
  }
})
</script>

(4)条件判断指令v-if、v-else、v-else-if、v-show

     注意:v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

    ①v-if

     v-if根据条件的true或false来判断元素是否插入

<div id="app">
    <p v-if="seen">未插入的存在</p>
    <template v-if="ok">
      <h1>糖果波</h1>
      <h2>润润家的糖果波</h2>
    </template>
</div>
    
<script>
new Vue({
  el: #app,
  data: {
    seen: false,
    ok: true
  }
})
</script>

    ②v-else

下面的例子给一个随机数,判断是否大于0.5,大于输出Yes,否则输出No。

<div id="app">
    <div v-if="Math.random() > 0.5">Yes</div>
    <div v-else>No</div>
</div>
    
<script>
new Vue({
  el: #app
})
</script>

    ③v-else-if

    v-else-if 在 2.1.0 新增,用作 v-if 的 else-if 块。可以链式的多次使用:

 

<div id="app">
    <div v-if="name === ‘糖‘"></div>
    <div v-else-if="name === ‘果‘"></div>
    <div v-else-if="name === ‘波‘"></div>
    <div v-else>
      润润家的糖果波
    </div>
</div>
    
<script>
new Vue({
  el: #app,
  data: {
    name: 
  }
})
</script>

 

    v-show

   v-show根据条件的true或false来判断元素是否可见

 

<div id="app">
    <p v-if="seen">看不见的存在</p>
    <template v-if="ok">
      <h1>糖果波</h1>
      <h2>润润家的糖果波</h2>
    </template>
</div>
    
<script>
new Vue({
  el: #app,
  data: {
    seen: false,
    ok: true
  }
})
</script>

 

注意:

    1、v-show 不支持 <template> 元素,也不支持 v-else。

     2、v-if用来判断元素是否插入DOM中;v-show已经在DOM中,只是用来判断元素是否可见,相当于CSS中的display属性。

 

     3、不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

 

(5)v-for 循环

  v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: #app,
  data: {
    sites: [
      { name: 张三 },
      { name: 李四 },
      { name: 王五 }
    ]
  }
})
</script>

     模板中使用:

<div id="app">
  <ul>
    <template v-for="site in sites">
      <li>{{ site.name }}</li>
      <li>--------------</li>
    </template>
  </ul>
</div>

<script>
new Vue({
  el: #app,
  data: {
    sites: [
      { name: ‘张三 },
      { name: 李四 },
      { name: 王五 }
    ]
  }
})
</script>

可以使用多个key 或 index作为参数:

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: #app,
  data: {
    object: {
      name: 糖果波,
      sex: ,
      job: GIS软件工程师
    }
  }
})
</script>

     通过V-for建立表格:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 建立表格</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>   //在线调用菜鸟教程的Vue.js
</head>
<body>
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{ person.name  }}</td>
                        <td>{{ person.age  }}</td>
                        <td>{{ person.sex  }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    <script>
        var vm = new Vue({
            el: #app,
            data: {
                people: [{
                    name: Jack,
                    age: 30,
                    sex: Male
                }, {
                    name: Bill,
                    age: 26,
                    sex: Male
                }, {
                    name: Tracy,
                    age: 22,
                    sex: Female
                }, {
                    name: Chris,
                    age: 36,
                    sex: Male
                }]
            }
        })
    </script>
    </body>
</html>

     整数的循环:

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: #app
})
</script>

(6)v-on 事件监听

      v-on 指令可以进行事件监听

    下面的例子用来监听click事件次数并增加属性值:

<div id="app">
  <button v-on:click="counter += 1">点击按钮</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: #app,
  data: {
    counter: 0
  }
})
</script>

     其中methods中写用来接收事件处理方法,可以写入js语句:

<div id="app">
  <button v-on:click="say(‘糖果波‘)">Say Name</button>
  <button v-on:click="say(‘你好‘)">Say hi</button>
</div>

<script>
new Vue({
  el: #app,
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
</script>

    其他事件修饰符:

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

其他按键修饰符:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

<!-- 常用键盘按键别名 -->
<input v-on:keyup.enter="submit">     <!-- 键盘enter键 -->
<input v-on:keyup.tab="submit">
<input v-on:keyup.delete ="submit">    <!-- 键盘delete键和退格键 -->
<input v-on:keyup.esc="submit">
<input v-on:keyup.space="submit">
<input v-on:keyup.up="submit">
<input v-on:keyup.down="submit">
<input v-on:keyup.left="submit">
<input v-on:keyup.right="submit">
<input v-on:keyup.ctrl="submit">
<input v-on:keyup.alt="submit">
<input v-on:keyup.shift="submit">
<input v-on:keyup.meta="submit">

四、缩写

    只有v-bind和v-on有缩写

<!-- v-bind -->
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>


<!-- v-on -->
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

 

以上是关于Vue.js学习使用心得的主要内容,如果未能解决你的问题,请参考以下文章

使用带有渲染功能的 Vue.js 3 片段

Javalucene4.0学习心得

Vue.js 中的片段

vuex使用心得

使用 Vue 模板清晰地分离视图和代码

Vue.js 系列教程 5:动画