了解和使用Vue Vue的一些基本指令

Vue的介绍

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单

vue是一个渐进式框架，让前端开发人员从dom操作解放出来，变为操纵数据即可，然后dom的操作Vue内部帮我们实现了，用了Vue之后不建议再去人为的操作dom。那下面说说Vue的一些基本指令

先来用npm命令安装下Vue包

安装好了之后就可以直接在html文件中引用本地Vue了

Vue的一些指令

v-text指令：这个是用来渲染文本的，可以简写：{{ message}} 切记!!!{{message}}要写在id为app的div中

    <div id="app">
        {{msg}}
    </div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data :{
                msg:"hello world!!!"
            }
        })
    </script>

浏览器中就会显示出来这段话

v-html指令，跟上面的是一样的，都是渲染文本的。区别是：这个可以解析html，！！！这个没有简写！！！

<div id="app">
    <div v-html="message"></div>
</div>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        let app= new Vue({
            el:'#app',
            data:{
                message:"<h1>我是H1</h1>"
            }
        })
    </script>

解析出来的内容就是我是H1标签

v-on 事件绑定 v-on:click=“xxx” 简写: @click=“xx” 来来来！废话不多说，上代码！ @click=“可以调用方法”

<div id="app">
        <h4>{{message}}</h4>
        <input type="button" value="点我！" v-on:click="message='lahu'">
        <input type="button" value="点我！" v-on:click="info">
        <!-- @click="可以用简写方法" -->
        <input type="button" value="点我！" @click="info1"> 
    </div>

    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "哈哈哈",
            },
            methods: {
                info(){
                    this.message="好好好"
                },
                info1(){
                    this.message="简写"
                }
            },
        })
    </script>

这个就不用上图了 想看的自己可以复制下代码看下