Vue基础语法1

新建Vue实例

const myVue = new Vue({
    el: '#app', //指定vue实例控制的模板区域
    data: {msg: 'Hello Vue'}, //定义数据
    methods: {} //定义方法
})

模板语法

插值表达式

<div id="app">
{{msg}}
</div>

指令

• v-text 在模板中输入变量,不会解析变量中的HTML标签

<div v-text="msg"></div>

• v-html 在模板中输入变量,会解析变量中的HTML标签解析

<div v-text="msg"></div>

• v-show 控制元素的显示和隐藏,通过css样式display:none方式实现

<div v-show="true|false"></div>

• v-if 控制元素的显示与隐藏,通过销毁DOM元素实现.

<div v-if="true|false"></div>

• v-on 注册事件

<div v-on:click="click()"></div>
<!-- 上面代码可以简写为以下格式 -->
<div @click="click()"></div>

• v-bind 动态绑定属性

<div v-bind:class="className"></div>
<!-- 上面代码可以简写为以下格式 -->
<div :class="className"></div>