<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
我的姓名是:{{name}}
<input type="text" v-model="name" /><!-- 双向绑定 -->
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
name:"wcj"
}
})
</script>
</body>
</html>
文本渲染 (v-text)(v-html)
<body>
<div id="app">
我的姓名是:{{name}}
<div v-text="message1"></div>
<div v-html="message2"></div>
<input type="text" v-model="name" /><!-- 双向绑定 -->
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
name:"wcj",
message1:"this is <i>text</i>",/* 文本 */
message2:"this is <i>html</i>" /* 斜体 */
}
});
</script>
</body>
属性绑定(光标悬停，提示信息)v-bind
<body>
<div id="app">
我的姓名是:{{name}}
<div v-text="message1"></div>
<div v-html="message2"></div>
<div v-bind:title="msg">this is title</div>
<div v-bind:title="msg2">this is title2</div>
<div>
<img :src="img_url" />
</div>
<input type="text" v-model="name" /><!-- 双向绑定 -->
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
name:"wcj",
message1:"this is <i>text</i>",/* 文本 */
message2:"this is <i>html</i>", /* 斜体 */
msg:"this is title",
msg2:"this is title2",
img_url:"images/1.0.jpeg"
}
});
</script>
</body>
class绑定方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style type="text/css">
.bgred{
background-color: red;
}
.bgsize{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
我的姓名是:{{name}}
<div v-text="message1"></div>
<div v-html="message2"></div>
<div v-bind:title="msg">this is title</div>
<div v-bind:title="msg2">this is title2</div>
<div>
<img :src="img_url" />
</div>
<!-- 第一种class绑定方式 -->
<div :class="{bgred:isbgred,bgsize:isbgsize}"></div>
<!-- 第二种class绑定方式 -->
<div :class="classObj"></div>
<!-- 第三种class绑定方式 -->
<div :class="[c1,c2]"></div>
<input type="text" v-model="name" /><!-- 双向绑定 -->
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
name:"wcj",
message1:"this is <i>text</i>",/* 文本 */
message2:"this is <i>html</i>", /* 斜体 */
msg:"this is title",
msg2:"this is title2",
img_url:"images/1.0.jpeg",
isbgred:true,
isbgsize:true,
classObj:{
bgred:false,
bgsize:true
},
c1:"bgred",
c2:"bgsize"
}
});
</script>
</body>
</html>
三元表达式；属性移除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style type="text/css">
.bgred{
background-color: red;
}
.bgsize{
width: 300px;
height: 300px;
}
.bgblue{
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
我的姓名是:{{name}}
<div v-text="message1"></div>
<div v-html="message2"></div>
<div v-bind:title="msg">this is title</div>
<div v-bind:title="msg2">this is title2</div>
<div>
<img :src="img_url" />
</div>
<!-- 第一种class绑定方式 -->
<div :class="{bgred:isbgred,bgsize:isbgsize}"></div>
<!-- 第二种class绑定方式 -->
<div :class="classObj"></div>
<!-- 第三种class绑定方式 -->
<div :class="[c1,c2]"></div>
<!-- 支持三元表达式 -->
<div class="bgsize" :class="[isA?classA:classB]"></div>
<!-- 对于这类属性，disabled, readonly,checked,selected,controls,autoplay，设置值为false，代表属性移除 -->
<button :disabled="isDisabled" type="button">测试disabled</button>
<input type="text" v-model="name" /><!-- 双向绑定 -->
</div>
<script type="text/javascript">
let vm=new Vue({
el:"#app",
data:{
name:"wcj",
message1:"this is <i>text</i>",/* 文本 */
message2:"this is <i>html</i>", /* 斜体 */
msg:"this is title",
msg2:"this is title2",
img_url:"images/1.0.jpeg",
isbgred:true,
isbgsize:true,
classObj:{
bgred:false,
bgsize:true
},
c1:"bgred",
c2:"bgsize",
isA:false,
classA:"bgred",
classB:"bgblue",
isDisabled:true
}
});
</script>
</body>
</html>
js事件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<style>
#div1{
width: 300px;
height: 300px;
border:1px solid #000000;
}
.bgred{
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<button @click="count=count+1">{{count}}</button>
<button @click="cl">调用无参的方法{{message}}</button>
<button @click="say('hi')">调用有参的方法{{test}}</button>
<div id="div1" :class="{bgred:flag}" @mouseover="changebg" @mouseout="changebg"></div>
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
count:0,
message:"hello",
test:'',
flag:false
},
methods:{
cl(){
//this=vm
this.message=this.message+" vue!";
},
say(msg){
this.test=msg;
},
changebg(){
this.flag=!this.flag;
}
}
});
</script>
</body>
</html>
网友评论