Vue.js小白入门必看（简单易懂）

---

前言

Vue的整体框架解构主要是由MVVM构成。 MVVM分为Model、View、ViewModel三者。 Model 代表数据模型，数据和业务逻辑都在Model层中定义； View 代表UI视图，负责数据的展示； ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作； Model和Value需要ViewModel来进行关联，并且Model与ViewModel之间还有着双向数据绑定的联系。 总的来说，使用Vue就解放了DOM。

---

提示：以下是本篇文章正文内容，下面案例可供参考

1.v-cloak

代码如下（示例）：

	<style>//使用css样式来帮助我们隐藏源码
        [v-cloak] {
            display: none;//隐藏元素
        }
    </style>

 	<div id="d1">//Value层
        //在使用模板语法的标签上添加v-cloak的指令
        <p v-cloak>{{message+1+1+1+1+1+1+1+1+1+1+1}}</p>
        //模板语法
    </div>

	<script src="vue.js"></script>//灵魂所在，没有vue.js就没法运行我们的Vue
    <script>
        // 创建一个Vue环境，创建一个VM层
        let vm = new Vue({//Model层
            el: "#d1",
            data: {
                message: "你好！Vue！"
            }
        })
    </script>

2.v-text

代码如下（示例）：

<div id="d1">
        <div v-text = "message"></div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                message:"把我传上客户端"
            }
        })
    </script>

v-text是将我们的源码以文本字符串的模式传输到客户端显示在用户的面前

3.v-html

与上面的v-text不同的是：v-html是我们的html格式可以写在Model层中，而后传输到客户端，并不影响样式的使用。
代码如下（示例）：

	<div id="d1">
        <div v-html = "message"></div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                message:"<h1>你好，我是Vue！</h1>"//字体内容以h1的格式传输到页面
            }
        })
    </script>

4.v-pre

代码如下（示例）：

	<div id="d1">
        <div v-pre>
            {{message}}//页面显示结果依旧是message
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                message:"不想被编译"
            }
        })
    </script>

在需要的情况下，使用v-pre可以将我们的源码显示在客户端

5.v-once

代码如下（示例）：

	<div id="d1">
        <div v-once> 
            {{message}}
        </div>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                message:"最初的梦想"//页面显示的结果
            },
            mounted(){//生命周期函数
                this.message = "后来的梦想"
            }
        })
    </script>

v-once可以在我们使用多次渲染页面的时候使页面始终保持第一种渲染结果

6.v-model

代码如下（示例）：

	<div id="d1">
        <input type="text" v-model = "message">//文本框
        <p>{{message}}</p>//p标签内的值会随着文本框内的值的改变而改变
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                message:"Vue,你好"
            }
        })
    </script>

v-model双向数据绑定，也是vue基础中最常用的，将Model层中的数据实时传输到Value层，而后可以用ViewModel来监听View层的数据的改变而改变。

7.v-on

代码如下（示例）：

	 <div id="d1">
        //v-on: 绑定事件
        //v-on：可以简写成为@
        <input type="text" v-model = "message" /><br/>
        <input type="button" value="加10" v-on:click = "add" /><br/>
        <input type="button" value="减10" @click = "sub" /><br/>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                message:1
            },
            //methods：用来写页面需要的方法的配置项
            methods:{
            	//add:funcution(){原本写法较老
            	//	this.message += 10;
            	//}
                add(){//新写法
                    this.message += 10;
                },
                sub(){
                    this.message -= 10;
                }
            }
        })
    </script>

v-on是当我们点击鼠标事件，页面改变事件，键盘事件时所用。

8.v-bind

代码如下（示例）：

	 <div id="d1">
        //v-bind: 绑定属性
        //v-bind:可以简写成:
        <img :src="imgUrl" >
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#d1",
            data:{
                imgUrl:"./img/路飞1.jpg"
            },
            mounted(){
                this.imgUrl = "./img/艾斯1.jpg"
            }
        })
    </script>

v-bind主要是用来绑定属性来帮助我们实现网页效果，代码中我们使用的是绑定了我们img的src属性来更改我们页面的图片。

---

希望我自己的理解可以帮助到各位新学Vue博友。