vue基础

Vue官网：https://cn.vuejs.org/
github（vue最新版本）：https://github.com/vuejs/vue-cli
文档

远程导入vue

创建vue实例

    <script>
        new Vue({
                //el为指定vue渲染的根元素
            el:"#app",
            data:{
                username:"hello vue.js"
            }
        })
    </script>

引用vue对象

    <div id="app">
        <p>{{username}}</p>
        <p>{{greet()}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                username:"hello vue.js",
            },
            methods:{
                    greet(){
                        return "非常帅"
                    }
            },
        })
    </script>

使用v-xxx

v-once：设置在末班中读取变量只读取一次，后续变量更改了，不会跟着变化
v-html：读取变量后，不会把它当做字符串，而是当做’html’元素进行解析
v-bind：在’html’标签的属性上，如果想要读取’vue.data’中的属性，那么需要使用’v-bind’或者省略方式

    <div id="app">
        //v-html 用于输出 html 代码
        <div v-html="code"></div>
        //v-bind 属性绑定
        //v-bind 第一种写法
        <img v-bind:src="logo" alt="">
        //v-bind第二种写法
        <img :src="logo" alt="">
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                code:"<a href='https://www.baidu.com'>百度一下,你就知道</a>",
                logo:"https://cn.vuejs.org/images/logo.png"
            }
        })
    </script>