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>