初识Vue.js ——简单的指令学习、了解MVVM思想

一、介绍

Vue是渐进式框架

Vue 被设计为可以自底向上逐层应用

Vue 的核心库只关注视图层

当与
现代化的工具链
https://cn.vuejs.org/v2/guide/single-file-components.html
以及各种
支持类库
https://github.com/vuejs/awesome-vue#libraries--plugins
结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、简单的指令学习

1.Vue的书写基本语法

 <div id="text">
        <div>{{msg}}</div>  <!--插值表达式，数据入的接收-->
    </div>
   
    <script src="./vue.js"></script><!--引入文件，通过在官网下载-->
    <script>
        let vm = new Vue({
            el:"#text",<!--告诉Vue填充到哪里-->
            data:{
                msg:'Hello Vue'<!--填充的数据-->
            }
        })
    </script>

2.v-clock解决

 <style>
        [v-cloak]{
            display: none;  /*解决闪动问题*/
        }
    </style>
<div v-cloak>{{msg}}</div>

3.v-text填充不会出现出现闪动

4.v-html有风险，原则是永远不要用在客户提供的内容上

5.v-per 跳过编译直接显示

6.v-once 只能编译一次，提高性能

<div v-once>{{info}}</div>
2~6完整代码

<style>
        [v-cloak]{
            display: none;  /*解决闪动问题*/
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-text="msg"></div><!--填充，不会出现闪动-->
        <div v-html="msg1"></div> <!--有风险，第三方软件不推荐使用-->
        <div v-pre>{{msg}}</div><!--跳过编译，直接显示-->
        <div v-once>{{info}}</div><!--只会编译一次，不会二次编译，可以提高性能-->
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:'Hello Vue',
                msg1:'<h1>HTML</h1>',
                info:'good'
            }
        })
    </script>

7.v-model 双向数据绑定

<div id="text">
        <div>{{msg}}</div>
        <div><input type="text" v-model="msg"></div><!--双向数据绑定-->
    </div>
   
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#text",
            data:{
                msg:'Hello Vue'
            }
        })
    </script>

8.v-on 绑定事件，缩写用法（@）

<div id="btn">
        <div>{{num}}</div>
        <div><button v-on:click="num++">点击</button></div>
        <div><button @click="num++">点击</button></div><!--缩写-->
        
        <div><input type="button" v-on:click="num++" value="点击"></div>
        <div><input type="button" @click="num++" value="点击"></div><!--缩写-->
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#btn", 
            data:{
                num:0
            }
        })
    </script>

9.v-bind绑定动态属性缩写（:）

 <div id="app">
        <span v-bind:title="content">小不人她，知制落极。</span><br>
        <span :title="content">小不人她，知制落极。</span> <!--缩写-->
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data(){
                return{
                    content:`加载于${new Date().toLocaleString()}`
                } 
            }
        })
    </script>