1.js添加vue.js脚本,项目中引用。
el表示选中的vue作用区域。
data里面存放数据。
methods中存放在该区域的所有方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data:{
msg:"第一个vue程序。"
}
})
</script>
2.VUE中的常用指令。
v-text和v-html是插值表达式。使用后会直接覆盖后面标签里的文字内容。
v-bind属性绑定指令,可以简写为 :。
v-on事件绑定指令,可以简写为 @ ,后面只能写函数名,不能直接书写js代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<p v-text="msg"></p>
<p v-html="msg"></p>
<input type="button" v-bind:value="msg">
<input type="button" :value="msg">
<input type="button" value="按钮1" v-on:click="show">
<input type="button" value="按钮1" @click="show">
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data:{
msg:"第一个vue程序。"
},
methods:{
show(){
alert('aa')
}
}
})
</script>
3.Vue中引入css样式的方法。
1.使用数组 2.三元运算符 3.直接使用对象 4.样式写在data中然后引用 5.直接在style中书写 6.样式写在data中,引用
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue-2.4.0.js"></script>
<style>
.red{
color: red;
}
.thin{
font-weight: lighter;
}
.bg{
background-color: yellow;
}
</style>
</head>
<body>
<div id="app">
<!-- 1.使用数组-->
<h2 :class="['red','thin','bg']">红字、瘦体、背景黄</h2>
<!-- 2.三元运算符-->
<h2 :class="['red','thin',isBg?'bg':'']">红字、瘦体、背景黄</h2>
<!-- 3.直接使用对象-->
<h2 :class="{red:true,thin:true,bg:flase}">红字、瘦体、无背景</h2>
<!-- 4.样式写在data中然后引用-->
<h2 :class="cssObj">红字、瘦体、背景黄</h2>
<!-- 5.直接在style中书写-->
<h2 :style="{'color':'red','font-weight':'lighter'}">红字、瘦体、无背景</h2>
<!-- 6.样式写在data中,引用-->
<h2 :style="[redCss,thinCss]">红字、瘦体、无背景</h2>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data:{
msg:"第一个vue程序。",
isBg:true,
cssObj:['red','thin','bg'],
redCss:{'color':'red'},
thinCss:{'font-weight':'lighter'}
}
})
</script>