本文末尾有完整的代码, 包含了其他内容，有时间再清理一下
结构上主要有三个部分：template/component、script、style 即： 模版/组件部分、vue脚本部分、css样式部分
- v-cloak 一避免在网络不好的情况下数据延迟加载 出现显示{{ }}的情况
<div v-cloak> {{ msg }}</div> //这样就可以了
css中添加下面的样式
<style>
[v-cloak] {
display: none
}
- v-model 双向绑定
// component里面 如下两行, 假设id是app
<input type="text" v-model="msg">
{{ msg }}
// srcipt 脚本
var vm= new Vue({
el: "#app",
data(){
return {
msg: "message for v-model example"
}
}
})
// 上面的data()..... 也可以简写成, 但上面的方式更规范
data:{
msg: "message for v-model example"
}
- v-bind 数据绑定到属性：比如title、value等，简写:title="title"(v-bind:title="title")
// component里面 如下两行, 假设id是app
<input type="button" v-bind:value="msg">
{{ msg }}
// srcipt 脚本
var vm= new Vue({
el: "#app",
data(){
return {
msg: "message for v-model example"
}
}
})
// 上面的data()..... 也可以简写成, 但上面的方式更规范
data:{
msg: "message for v-model example"
}
- v-on 事件绑定, 具体有哪些默认事件可以查看Vue文档，常见的有click,keyup,focus等
// component里面 如下两行, 假设id是app
<input type="button" @click="showMsg">
<input type="button" on-click="showMsg">
<p v-on:click="showMsg"> {{ msg }} </p>
<p @click="showMsg"> {{ msg }} </p>
// srcipt 脚本
var vm= new Vue({
el: "#app",
data(){
return {
msg: "message for v-model example"
}
}
})
// 上面的data()..... 也可以简写成, 但上面的方式更规范
data:{
msg: "message for v-model example"
}
- v-html ：将html解析出来不原生显示
// component里面 如下两行, 假设id是app
<p>{{rawHtml}}</p>
<p v-text="rawHtml"></p>
<p v-html="rawHtml"></p>
// srcipt 脚本
var vm= new Vue({
el: "#app",
data(){
return {
rawHtml:"<h1> rawHtml</h1>",
msg: "message for v-model example"
}
}
})
// 上面的data()..... 也可以简写成, 但上面的方式更规范
data:{
msg: "message for v-model example"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" oncont="ie=edge">
<title>Lesson one</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.inner {
width:500px;
height: 3.125rem;
padding:10px;
border: 2px solid blue;
}
.input {
width:300px;
}
.red {
color:red;
}
.italic{
font-style: italic;
}
.thin{
font-weight: 150;
}
.active{
letter-spacing: 0.5rem;
font-weight: bold;
color:forestgreen;
}
.input {width:222px; height:30px;}
</style>
</head>
<body>
<div id="appx">
<input type="text" class="input" v-model="msg" />
<p v-on:click="showMsg">{{ msg }}</p>
<p @click="showMsg">{{ msg }} ----</p>
<p>{{rawHtml}}</p>
<p v-text="rawHtml"></p>
<p v-html="rawHtml"></p>
</div>
<script>
var vmx = new Vue({
el:"#appx",
data(){
return {
rawHtml:"<h1> rawHtml</h1>",
msg: "vue v-model example "
}
},
methods: {
showMsg:function(){
alert("v-on click event")
}
}
})
</script>
<hr>
<div id="app2">
<h2 v-bind:class="['tink', 'italic']">This is a vue v-bind class example!</h2>
<h2 :class="['tink', 'italic']">This is a vue v-bind class example 2!</h2>
<h2 :class="['tink', 'italic', active?'active':'']">This is a vue v-bind class example 2!</h2>
<h2 :class="['tink', 'italic', activeFalse?'active':'']">This is a vue v-bind class example 2!</h2>
<h2 :class="['tink', 'italic', {'active':flag}]">This is a vue v-bind class example 2!</h2>
<h2 :class="classObj">This is a vue v-bind class example Obj 2 class!</h2>
<h2 :style="styleObj">This is a vue v-bind class example Obj 2 style 11111!</h2>
<h2 :style="styleObj2">This is a vue v-bind class example Obj 2 style 2222222!</h2>
<h2 :style="[styleObj, styleObj2]">This is a vue v-bind class example Obj 2 style 333333!</h2>
</div>
<script>
var vm2 = new Vue({
el: "#app2",
data: {
active: true,
activeFalse: false,
flag: true,
styleObj: {color: 'green', 'word-spacing': '1rem', 'font-weight': 500},
styleObj2: {color:'pink', 'background':'#555', 'font-style': 'oblique'},
classObj:{red: true, active: false, italic: false}
}
});
</script>
<div id="app" style="margin-top:40px;">
v-bind只能实现数据的单向绑定，无法实现数据的双向绑定
<input type="button" v-bind:value="msg" class="input" />
<input type="text" v-bind:value="msg" class="input" />
<hr>
v-model 可以实现表单元素和model中数据的双向绑定，只能运用在表单元素中 input / selcet/checkbox/radio/textarea
<input type="text" class="input" v-model="msg" />
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
msg: "v-bind 单向绑定"
}
})
</script>
</body>
</html>
