VUE 模板语法 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Vue - 模板语法 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body  >
    <div id="app">
            <span>Message: {{ msg + "hello"}}</span><!-- 只支持一句话表达式，单个表达式 如果是变量的话只允许vm对象里面的变量 例如外部全局变量会出现undefined -->
            <span v-once>这个将不会改变: {{ msg }}</span>
            <input v-model="msg">
            <p>Using mustaches: {{ rawHtml }}</p>
            <p>Using v-html directive: <span v-html="rawHtml"></span></p>
            <input v-bind:value="value">
            <!-- <input id={{id}}> 错误的 mustache 语法不能使用再标签的属性上，需要通过bind来实现 -->
            <p v-if="seen">现在你看到我了</p>
            <a v-bind:href="url">v-bind 绑定属性</a>
            <br>
            <a v-bind:[attr]="dynamic">动态属性</a>
    </div>
    <!-- 
        v-bind:href :href
        v-on:click  @click
     -->
</body>
</html>
<script>   
    vm = new Vue({
        el : '#app',
        data : {
            value : '你好漂亮',
            msg : '1',
            rawHtml : '<h1>Hi{{msg}}</h1>',
            seen : 'true',
            url : 'https://www.baidu.com',
            attr : 'href', /* 文档中的attributeName 应该被保留了 请不要用这个字符串作为变量key */
            dynamic : '这是一个动态属性'
        },
    });
</script>

 

posted @ 2019-02-25 15:27  鱼尾纹  阅读(177)  评论(0)    收藏  举报