实例的声明:方式一
import Vue from 'vue'
var appTmp = new Vue({
data:{
message3: 'Hello',
message4: 'Hello Vue.js'
}
})
方式二:
import Vue from 'vue'
var appTmp = new Vue({
data(){
return{
message3: 'Hello',
message4: 'Hello Vue.js'
}
}
})
注意:在使用Vue的时候,要导入vue : import Vue from 'vue'
调用方式:变量名称.属性 比如:appTmp.message3
//整体代码
<template>
<div id="app">
<button v-on:click="fun">button</button>
{{message1}}<br>
{{message2}}
</div>
</template>
<script>
import Vue from 'vue'
var appTmp = new Vue({
// el: "#app",
/**** 此处于有两种实现的方式:****/
// data(){
//
// return{
// message3: 'Hello',
// message4: 'Hello Vue.js'
// }
// },
data:{
message3: 'Hello',
message4: 'Hello Vue.js'
}
})
export default {
name: 'app',
// el: '#app',//此处也可以是这种
data() {
return {
message2:appTmp.message3,
message1:appTmp.message4
}
},
methods:{
fun:function () {
this.message1="1234";
//this.message1=appTmp.message2;
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
运行效果:
点击按钮: