渐进式框架-Vue

介绍

1.什么是Vue框架

是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

2.什么是JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
JSON 是 JS 对象的字符串表示法，它使用文本表示一个 JS 对象的信息，本质是一个字符串。
JSON写法:对象是一个无序的“‘名称/值’对”集合。一个对象以 {左括号 开始， }右括号 结束。每个“名称”后跟一个 :冒号 ；“‘名称/值’ 对”之间使用 ,逗号 分隔,意思是：{"名称1":"值1","名称2":"值2"}

• 一个json对象：jsonObj:{"name"="alex"}
• 一个json数组：jsonArry:[{"name"="alex","age"=22},{"name"="bixby","age"=20}]
• 一个复杂一点的json数组：jsonArry:[{"name"="alex","age"=22,"address":{"phone":"1388888888","email":"123456789@qq.com"}}]

3.第一个vue程序

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

 <script>
//创建vue实例化对象
const app = new Vue({
  el: '#app',  //id选择器选中元素
//数据都放在数据属性里面
  data: {
    message: 'Hello Vue!'  
  }
})
 </script>

• v-bind绑定数据。v-bind特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-bind:title="message"将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致.另：v-bind:title="message"可缩写为:title="message"

• 条件与循环

 <div id="content">
        <span v-if="seen"> now you can see me</span>
        <span v-else-if="isseen">now you can not see me</span>
        <span v-else>and now you can see me</span>
    </div>

 <script>
        const vm = new Vue({
            el: "#content",
            data: {
                seen: false,
                isseen: false
                }
</script>

v-if、v-else-if、v-else就相当于if条件语句，以上代码的意思是第一个span和第二个span都被删除，只保留第三个span。

• v-for指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而item 则是被迭代的数组元素的别名。另：in可以用of代替。

 <tr v-for="(content,index) in books">
                    <td>{{index+1}}</td>
                    <td>{{content.name}}</td>
                    <td>{{content.author}}</td>
                    <td><input type="number" name="" id="" v-model.number="content.price"></td>
                    <td><input type="number" name="" id="" v-model.number="content.number"></td>
                    <td><button @click="delebook">删除</button></td>
</tr>

可以用v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。例如按钮的点击事件

<button v-on:click="delebook">删除</button>

4. 事件修饰符

• .stop阻止单击事件继续传播，准确的来说是阻止冒泡，也就是说阻止子元素的事件传递到父元素

<div id="app">
        <div v-on:click="dodo">
            <button v-on:click.stop="doThis">阻止单击事件继续传播</button>
        </div>
    </div>

  <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "Vue.js"
            },
            methods: {
                doThis: function () {
                    alert("noclick");
                },
                dodo: function () {
                    alert("dodo");
                }
            }
        });
    </script>

结果：只弹出“noclick”，就不会触发dodo这个方法.

• .prevent

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

上面这段代码就会阻止submit的默认提交事件，而会执行分配给它的SomeFunction

• .capture的作用是优先执行最外层有.capture的父元素，再执行倒数第二个有.capture父元素，最后再按照正常的冒泡从自己开始往上执行.例如:

<div id="app"> 
　　<div class="outer" @click.capture="outer"> 
　　　　<div class="middle" @click.capture="middle"> 
　　　　　　<button @click="inner">点击</button>
    　　</div>
    </div> 
</div>

执行顺序的结果为:
1:outer
2.middle
3.inner

再例如：

<div id="app"> 
　　<div class="outer" @click="outer"> 
　　　　<div class="middle" @click.capture="middle"> 
　　　　　　<button @click="inner">点击我(^_^)</button>
    　　</div>
    </div> 
</div>

上面代码的执行顺序为:
1.middle
2.inner
3.outer

• .self的作用是不让子元素的事件触发到自己的绑定事件，但是不会阻止冒泡，相当于跳过自己执行冒泡

<div id="app"> 
　　<div class="outer" @click="outer"> 
　　　　<div class="middle" @click.self="middle"> 
　　　　　　<button @click="inner">点击</button>
    　　</div>
    </div> 
</div>

上面这段代码的意思是，点击button，先执行inner的点击事件，传递到父元素middle，但是.self阻止了middle的点击事件，所以继续冒泡到外层outer

• .once，如果一个事件有once修饰符，那么执行后就不会执行第二次了