初步学习vue.js

Posted 2020-08-16

vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。

响应的数据绑定

Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。

 

<!--html页面-->
<div id="example">
    hello {{name}}
</div>
----------------------------------------------
//js文件
var exampleData = {
  name: ‘Vue.js‘
}

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var exampleVM = new Vue({
  el: ‘#example‘,
  data: exampleData
})

 

指令

指令 (Directives) 是特殊的带有前缀 v- 的特性。指令的值限定为绑定表达式，因此上面提到的 javascript 表达式及过滤器规则在这里也适用。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上.

v-on指令用于监听 DOM 事件

 

 

<!--html页面-->
<div id="example">
    <p>{{msg}}</p>
    <button v-on:click="change">hello</button>
</div>
----------------------------------------------
//js文件

var vm = new Vue({
  el: ‘#example‘,
  data:{
        msg:"first"
   },
   method:{
       change:function(){
              this.msg = "second"
        }, 
   }, 
})

 

 

 

 

v-bind 指令用于响应地更新 HTML 特性

 

<!--html页面-->
<div id="example">
    <!--绑定url-->
    <a v-bind:href="url"></a>

    <!--绑定class-->
    <div v-bind:class="classA"></div>
</div>
--------------------------------------------------------------------
//js文件
var vm = new Vue({
    el:"example",
    data:{
        url:"http://cn.vuejs.org/",
        classA:"container",
    },
})

 

v-for指令用于渲染列表。这个指令使用特殊的语法，形式为item in items，items 是数据数组，item 是当前数组元素的别名

 

<!--html页面-->
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
--------------------------------------------
//js文件
var example1 = new Vue({
  el: ‘#example-1‘,
  data: {
    items: [
      { message: ‘Foo‘ },
      { message: ‘Bar‘ }
    ]
  }
})

 

v-model指令用于数据双向绑定

 

<!--html页面-->
<div id="example">
    <span>Message is: {{ message }}</span>
    <br>
    <input type="text" v-model="message" placeholder="edit me">
</div>
---------------------------------------------------
//js文件
var vm = new Vue({
    el:"example",
    data:{
        message:‘‘,
    },
})

v-if条件渲染

<div id ="example">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
     <button v-on:click="changeOk">hello</div>
</div>
---------------------------------------------------
var vm = new Vue({
    el:"example",
    data:{
        ok:true,
    },
    methods:{
        changeOk:function(){
            this.ok = false
        }
    }
})

指令修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀，用于表示指令应当以特殊方式绑定。

 

<!--解析为一个字面字符串而不是一个表达式-->
<a v-bind:href.literal="/a/b/c"></a>

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

 

先写到这里，未完待续。。。。