Vue.js入门
Vue.js是一套构建用户界面的渐进式框架,它只关注视图层，目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。（需注意：Vue.js不支持IE8及以下的版本）
FristVue
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 已将vue源码copy到项目的Vue.js文件中,此处将其导入 -->
<script src="vue.js"></script>
</head>
<body>
<div id = "fristVue"></div>
<script>
// 创建 Vue 的实例
new Vue({
// el(挂载点) 此处将 Id 为 fristVue 的dom节点与Vue实例进行绑定
el : "#fristVue",
/* *
* 设置模板(可以通过template设置模板，指定 firstVue 里面的内容)
* 效果相当于→ <div id="fristVue"><h1>hello world , {{massage}}{{massage2}} </h1></div>
* {{massage}} 可以获取vue中massage的数据 格式→ {{ key }}
*/
template : "<h1>hello world ,{{massage}}{{massage2}} </h1>",
// 设定vue的数据
data : {
massage : "hello vue",
massage2 : "<h1>hello China</h1>"
}
});
</script>
</body>效果：
v-text和v-html（不能和 template 同用）
<div id = "fristVue">
<!-- 使用 v-text 加载 massage会转译其中的标签代码 -->
<h1 v-text = "massage2"></h1>
<!-- 使用 v-html 加载 massage不会转译其中的标签代码 -->
<h1 v-html = "massage2"></h1>
</div>效果：
v-on: 事件绑定（可以简写为 @）
<!-- 绑定点击事件，v-on:click 可以简写为 @click -->
<div id = "bindEvent" v-on:click = "clickEvent();">{{text}}</div>
<script>
new Vue({
el : "#bindEvent",
data : {
text : "clickBefore"
},
// 定义 Vue 的方法
methods : {
clickEvent : function(){
// 当点击事件触发后，改变text的值，同时页面也会随之改变
this.text = "clickAfter"
}
}
});
</script>属性绑定和数据双向绑定
<div id = "bindElementAndData">
<!-- 此处使用 v-bind: 将value的值与vue实例中的 bindElement 相绑定（v-bind 可以简写为 :） -->
<span v-bind:title = "bindElement">属性绑定</span><br />
<!-- 使用 v-model 可以实现数据的双向绑定，当改变 input 的 value值时，bindData也会实时改变 -->
<input v-model:value = "bindData">
<div>{{str}}</div>
</div>
<script>
new Vue({
el : "#bindElementAndData",
data : {
bindElement : "属性绑定",
bindData : "数据双向绑定"
},
// 定义计算属性 str
computed : {
str : function () {
// 返回str的值
return this.bindElement + '+' + this.bindData
}
}
});
</script>效果：
watch侦听器
<div id = "watchDemo">
<input v-model= "text" />
<div>text改变了 {{count}} 次</div>
</div>
<script>
new Vue({
el : "#watchDemo",
data : {
count : 0,
text : "text"
},
// 定义侦听器
watch : {
// 当text改变时触发
text : function(){
return this.count ++;
}
}
});
</script>效果：
v-if、v-show、v-for
<div id = "showAndForDemo">
<!-- 定义点击事件，点击后将 flagByIf 改为相反的值 -->
<input type="button" value = "v-if点击显示或不显示" @click = "showByIf();">
<input type="button" value = "v-show点击显示或不显示" @click = "show();">
<!-- 当flagByIf等于false时会将该div标签移除 -->
<div v-if="flagByIf">
<ul>
<li v-for="item of showList">v-if____{{item}}</li>
</ul>
</div>
<!-- 当flag等于false时会将该div标签的display的值改为none -->
<div v-show="flag">
<ul>
<li v-for="item of showList">v-show____{{item}}</li>
</ul>
</div>
</div>
<script>
new Vue({
el : "#showAndForDemo",
data : {
flag : true,
flagByIf : true,
showList : ["item of showList", "当循环showList时，会将每一组数据依次放到item这个变量中"]
},
methods : {
show : function(){
return this.flag = !this.flag;
},
showByIf : function(){
return this.flagByIf = !this.flagByIf;
}
}
});
</script>效果：
组件的使用
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
<div id = "componentDemo">
<input v-model = "addValue" />
<input type="submit" @click = "addListValue();" value = "提交数据"/>
<ul>
// 此处绑定delete事件，当子组件触发时，执行deleteThis
<todo_list v-for = "(item, index) of list" :key = "index" :num = "index" :value = "item" @delete = "deleteThis"></todo_list>
</ul>
</div>
<script>
// 声明一个 todo_list 的组件（这个组件相当于vue实例（父组件）的子组件）
Vue.component("todo_list", {
// 接收父组件的value和num
props : ["value", "num"],
// template声明一个模板,并增加点击事件，当按钮被点击时，通过clickEvent()触发父组件的delete事件，删除该条数据
template : "<div><li>{{value}}</li><button type = 'button' @click = 'clickEvent(num);'>删除</button></div>",
methods : {
clickEvent : function(){
// 使用 $emit 触发父组件的delete事件
this.$emit("delete", this.num);
}
}
})
new Vue({
el : "#componentDemo",
data : {
addValue : "",
list : []
},
methods : {
addListValue : function(){
if ("" != this.addValue){
// 触发事件时将数据添加进list
this.list.push(this.addValue);
// 清空输入框
this.addValue = "";
}
},
deleteThis : function(num){
this.list.splice(num, 1);
}
}
});
</script>效果：
155
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
