vue框架基础知识及基础应用

vue

Vue是一套基于Javascript实现的渐进式框架，用于构建用户界面。 其核心为响应式数据驱动，由数据的更新实现页面的更新。可以简化DOM操作。

如何在html中使用vue

1.下载vue.js文件(或引入在线文件)后引入

<!--引入在线vue.js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.在html页面的body中新建一个div，id命名为app

<div id="app">
</div>

3.在script中创建vue应用，绑定到上一步创建的div中

<script>
//创建一个Vue应用，绑定到页面中的某个节点上
var app = new Vue({
el:"#app"//绑定到id=app的节点上
});
</script>

4.定义数据 

<script>
    var app = new Vue({
        el:"#app",
        //定义Vue应用中的数据
        data:{
            //键值对的形式定义数据
            msg:"字符串",
            person:{
                name:"张明",
                age:20
            },
            array:['A','C','B']
        }
    });
</script>
​

5.插值表达式

<div id="app">
<!--{{data中的数据}}用于双标签中输出data中定义的变量-->
    <p>
        {{msg}}
    </p>
    <p>
        {{person.name}}
    </p>
    <p>
        {{array[0]}}
    </p>
</div>

这个就是vue框架的最基础的用法，可以在浏览器的控制台中对每个进行实时修改

具体用法

• {{变量}}

  插值表达式。在双标签中输出Vue应用中，定义在data里的数据

  <div id="app">
      <h1>{{msg}}</h1>
      <p>{{person.name}}</p>
      <p>{{arrays[0]}}</p>
  </div>

• v-bind:属性="变量"

  动态属性。将某个标签的某个属性值和data中的数据进行绑定；可以简写为 :属性="变量"

<p v-bind:title="msg">悬停试试</p>
<p :title="person.name">悬停试试</p>

• v-show="变量"

  满足条件显示节点，不满足则通过display:none隐藏节点

  <h1 v-show="true">一级标题</h1>

• v-model="变量"

  文本框双向绑定

  <input type="text" v-model="money">
  <p>
      当前金额{{money}}
  </p>

• v-for="(遍历出的元素,元素的索引) in 要遍历的集合

<select>
    <option v-for="(item,index) in arrays" :value="index">{{item}}
    </option>
</select>
​

• v-on:事件名="函数"

  可以简写为 @事件名="函数"

<div id="app">
    //click事件触发test()函数
    <button v-on:click="test()"></button>
    <button @click="test()"></button>
</div>
<script>
    //创建Vue应用
    var app = new Vue({
        el: "#app",
        data: {},
        //定义Vue中的函数
        methods:{
            test(){
                alert("一个普通的函数");
                }
            }
    });
</script>