vue基本指令1

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//配置开发模式

Vue.config.productionTip = false

/* eslint-disable no-new */

//创建实例
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

2.//模版语法（Mustache）{{}}只能存在单行语句

<script>
export default {
name: 'HelloWorld',

//data表示state状态
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>

3.v-once(只能渲染一次  const)

{{msg}}
<p v-once>{{msg}}</p>//只能渲染一次

4.v-html：解析html结构

<div v-html="biaoqian"></div>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
biaoqian:"<h1>我是H1标签</h1>"
}
}
}
</script>

 5.v-bind指令（解析属性中的对象）

简写（:）

 对象；

<a v-bind:href="url">{{url_name}}</a>
<a :href="url">{{url_name}}</a>
<p v-bind:class="disClass">我是段落p</p>
<p :class="disClass">我是段落p1</p>
<p :class="dis2Class+'-22'">我是段落p22</p>

<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
biaoqian:"<h1>我是H1标签</h1>",
url_name:"百度",
url:"https://www.baidu.com",
disClass:"disactive",
dis2Class:"item"
}
}
}
</script>