02 - Vue入门:模板语法

模板语法

  1. 插值,遵循Mustache语法

        <h1>{{ message }}h1>
        ```
    
    
  2. 输出原始的HTML文本,需要使用到 v-html 指令

    	<div id="app">
    		原始的HTML文本:{{ rawHtml }}
    		<span v-html="rawHtml">span>
    	div>
    

    其中{{ rawHtml }} 被渲染为一段文本,而包含v-html属性的标签被渲染为HTML。

  3. v-once 指令作用在标签属性上,表示该标签内的插值只会被渲染一次

  4. 插值中可以使用JavaScript表达式,例如:三目运算、++、–、字符串处理函数

  5. 由于插值不能作用与HTML标签的属性上,所以需要使用v-bind指令,将数据绑定到标签的属性上

    <div v-bind:id="eleId">div>
    <script>
    	var app = new Vue({
            ...
            data: {
                eleId: "content"
            }
    	})
    script>
    

    这样

    标签的id属性就与eleId变量之间建立了双向绑定关系。

  6. v-on 指令用来监听DOM事件

    <button v-on:click="handleClick">div>
    <script>
    	new Vue({
            ...
            methods: {
                handleClick: function () {
                    // do something
                }
            }
    	})
    script>
    

    对于

你可能感兴趣的:(Vue)