Vue基础

VUE基础

安装VUE

cnpm install vue --save
必须引用 vue.min.js才可以

Vue的基本结构

先引用VUE插件

  <div id="one">
        {{msg}}//小胡子语法
    </div>
    <script>
        var app = new Vue({
        //事件名
            el: "#one",
            //定义的变量
            data: {
                msg: "hello"
            }
        })
    </script>

Vue的双向绑定

 <div id="app">
        <input type="text" v-model="msg">{{msg}}
    </div>
    <script>
    var app =new Vue({
        el:"#app",
        data:{
            msg:"hello!"
        }
    })
    </script>

原生JS的双向绑定

  
    <div id="app">
        <input type="text" id="input">
        <span id="span" id="span"></span>
    </div>
</body>
<script>

    //原生的双向绑定
    var input = document.querySelector("#input");
    var span = document.querySelector("#span");
    var obj = {};
    Object.defineProperty(obj, "msg", {
        get() {
//获取内容
        },
        set(val) {
            span.innerHTML = val//设置内容
        }
    })
    input.addEventListener("input", function () {
        obj.msg = input.value;
    })

Vue的基本指令

指令：v-model, v-bind , v-on , v-cloak ,v-for

  <div id="app" v-cloak>
        <!--  v-model  双向指令 -->
        <input type="text" v-model="msg">
        <!-- v-text 在span里添加内容 -->
        <span v-text="msg"></span>
        <!-- v-bind 绑定事件  简写为 ：-->
        <img :src="imgUrl" alt="">
        <!-- <img v-bind:src="imgUrl" alt=""> -->
        <!-- v-html 添加标签-->
        <div v-html ="myhtml"></div>
        <!-- v-on 绑定事件或者监听事件  简写为：@ -->
        <button @click="alert('fly')">我要飞</button>
        <!-- <button @click="alert('fly')">按钮</button> -->
        <!-- <button v-on:click="alert('fly')">按钮</button> -->
        <span>{{msg}}</span>
    </div>
      <script>
    //指令：v-model, v-bind , v-on , v-cloak ,v-for
var app =new Vue({
    el:"#app",
    data:{
        msg:"123",
        imgUrl:'../images/01.jpg',//绑定图片路径
        myhtml:"<p>这是一段语句</p>",

    }
})
  

    </script>

for指令

for指令可以遍历数组，对象，字符串等，它有两个参数，第一个是Item，第二个是index

 <div id="app">
<ul>
      <!-- <li v-for="(item,index) in arr">{{index}} --- {{item}}</li>

        v-for 可以遍历对象数组
       -->
       <!-- <li v-for="(item,key) in {name:111,age:222}">{{key}}:   {{item}}</li> -->
    <li v-for ="item in arr">{{item}}</li>
</ul>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
    el:"#app",
    data:{
        arr:[1,2,3,4,5,6]
    }
})
</script>

Vue的综合小案例

  <div id="app">
        <input type="text" v-model ="inputValue" @keyup.enter="addTodo">
        <ul>
            <li v-for="(item,index) in arr">{{item}}<button @click="deleteTodo(index)">删除</button></li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
            //在data里设置变量
                inputValue: "",
                arr: []
            },
            methods: {
            //在methods中设置函数方法
                addTodo(event) {
                    this.arr.push(this.inputValue);
                    this.inputValue = ''
                },
                deleteTodo(index) {
                    this.arr.splice(index, 1)
                }
            }
        })
    </script>