Vue 模板方法<script src="https://cdn.staticfile.org/vue/2.2.2/vu


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 模板语法学习</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>

<!--绑定数据-->
<div id="app">  <!-- view -->
    <input value="message" v-model="message">
    <input value="username" v-model="username">
    <p>{{ message }}</p>
    <p>{{ username }}</p>
</div>


<div id="app1">
    <h1> 双大括号表达式 {{message1}}</h1>
    <h2> 转大写{{message1.toUpperCase()}}</h2>

    <p v-text="msg">m1</p> <!-- textContent-->
    <p v-html="msg">m2</p> <!-- innerHtml-->

    <h2>2 指令1 强制数据绑定</h2>
    <img v-bind:src="imagURl">
    <img :src="imagURl">

    <p>超链接url</p>
    <a :href="url"> url</a>
    <a v-bind:href="url">url</a>

    <h2>3 绑定事件监听</h2>
    <button v-on:click="test1">test</button>
    <button @click="test(111)">test</button>

</div>
<script>
    //创建vue实例
    var vm = new Vue({    //配置对象
        el: '#app', //dom 节点 element:选择器
        data: {     //数据 （model）
            message: 'Hello Vue.js!',
            username: "tizzy"
        }

    });


    //MVVM :
    //model:模型，数据对象data
    //view : 视图，模板页面
    //viewModel:视图模型（Vue的实例）

    /*
    1 模板语法
    */

    var app = new Vue({    //配置对象
        el: '#app1', //dom 节点 element:选择器
        data: {     //数据 （model）
            message1: 'Hello Vue.js! 111',
            username1: "tizzy1",
            imagURl:"https://cn.vuejs.org/images/logo.png",
            url:"https://cn.vuejs.org/v2/guide/syntax.html#v-bind-%E7%BC%A9%E5%86%99",
            msg:"https://cn.vuejs.org/v2/guide/syntax.html#v-bind-%E7%BC%A9%E5%86%99"
        },
        methods:{
            test(string) {
                alert(string);
            },
            test1(){
                alert('test1');
            }
        }
    });

</script>



</body>
</html>
在这里插入图片描述