首先我们使用vue时首先得在js中引入vue.js文件
<script src="./vue.js"></script>
引入成功后可以先测试引入是否成功
HTML代码
<div id="app">
{{message}}
</div>
js代码
var app =new Vue({
el:`#app`,
data:{
message:`**`
}
})
1.容器 ,app容器名称**,注:容器名称尽量使用id绑定唯一值**
2.{{}}插值语法(Vue使用语法)
3. el绑定容器(还可以使用$.mount()绑定容器)
提醒
Vue.config.productionTip = false;
可以阻止VUE在启动时产生的提示
v-bind:动态绑定属性简写英文的:
html代码:
<div id="app">
<a href="http://www.baidu.com">访问百度</a>
<!-- v-bind:动态绑定属性 -->
<a v-bind:href="abc" v-bind:class="a">vue方法访问vue官网</a>
</div>
js代码:
var vm = new Vue({
data() {
return {
userName:"王五",
abc:"https://v2.cn.vuejs.org/v2/guide/syntax.html",
a:"box1"
}
},
})
vm.$mount("#ips");
// 绑定容器的2种方式
// 1.el绑定:"容器id或class等"
// 2.Vue实例.$mount("容器id或class等"),注:一定写在最后
v-on:事件 == @事件( 绑定事件)
html:
<div id="app">
<button v-on:click="func1(1)">点击1</button>
<button @click="func1(2)">点击2</button>
<h1 :class="sty">我现在点击的是{{num}}</h1>
<h1 :style="boss[0]">绑定样式style</h1>
</div>
js:
var vm = new Vue({
// el:"#app",
data(){
return{
userName:"张三",
num:"",
sty:"",
boss:[
{
border:"5px solid pink"
},
{
color:"red"
}
]
}
}
methods处理的函数方法
methods: {
func(){
console.log(2);
return 1111111;
},
func1:function(user){
if(user==1){
this.num = 1;
this.sty = "box1";
console.log(222222222);
}else {
this.num = 2;
this.sty = "box2"
console.log(2);
}
},
func2(){
this.num = 2;
this.sty = "box2"
console.log(1);
}
},
})
vm.$mount("#app");