本文是一篇关于Vue.js的入门教程，由阿里P8尤雨溪创建。文章介绍了Vue作为渐进式js框架，强调简化DOM操作和响应式数据驱动。内容涵盖Vue的基本认识、入门示例、核心指令如v-text、v-html、v-on等，以及组件、Axios通信、计算属性、slot插槽和自定义事件等内容。
索引
一、认识
官网：
https://cn.vuejs.org/
作者：
尤雨溪，据说现在是阿里P8
首先，官方说是渐进式js框架，对于后端程序员来说，我觉得渐进式的意思是指：可以通过操作很少的DOM甚至不需要操作DOM元素，就能轻易完成数据和视图的绑定。
它不推荐再使用jQuery
最后，抓住它三个关键词就行了：js框架、简化DOM操作、响应式数据驱动
二、入门
先把官网的例子看一看，入门肯定要写一遍hello world
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
效果：数据绑定上了
el的值就是css选择器，data里放数据
三、指令
v-text
作用：设置标签的文本值
简写：{{}}
效果：它会完全替换掉里边的文本，{{}}是这个指令的简写
所以：各有各的应用场景，要么完全替换，要么替换部分
<div id="app">
<h1 v-text="message">耗子尾汁</h1>
<h1 v-text="info">耗子尾汁</h1>
<h1>{{message}}耗子尾汁</h1>
</div>
var app = new Vue({
el: '#app',
data: {
message: '用户名：break',
info: '用户名：java程序猿'
}
})
v-html
作用：设置标签的innerHTML
<div id="app">
<p v-html="context"></p>
<p v-text="context"></p>
</div>
var app = new Vue({
el: '#app',
data: {
context: "<a href='#'>一个a标签</a>"
}
})
v-on
作用：给元素绑定事件
简写：@
<div id="app">
<input type="button" value="呆鸡" v-on:click="go" />
<input type="button" value="划过" v-on:mouseenter="go" />
<input type="button" value="双鸡" v-on:dblclick="go" />
<input type="button" value="双鸡简写" @dblclick="go" />
<p>{{count}}</p>
</div>
var app = new Vue({
el: '#app',
data: {
count: 1
},
methods:{
go: function(){
console.log("事件触发");
this.count++
}
}
})
v-show
作用：根据真假显示/隐藏元素
<div id="app">
<input type="button" value="显示/隐藏" @click="go" />
<img v-show="isShow" src="img/0005018622772314_b.jpg" />
</div>
var app = new Vue({
el: '#app',
data: {
isShow: true,
},
methods:{
go: function(){
this.isShow = !this.isShow;
}
}
})
v-if
作用：根据真假显示/隐藏元素（操作dom元素）
与v-show不同的是：v-show是改变元素里边的属性，v-if是直接干掉这个标签
v-bind
作用：设置元素属性，比如class、title、src。。。
简写：:属性名
<div id="app">
<img :src="imgSrc" alt="" :title="imageTit" />
</div>
var app = new Vue({
el: '#app',
data: {
imgSrc: 'img/0005018622772314_b.jpg',
imageTit: '这是一张图'
}
})
v-for
作用：循环
<div id="app">
<ul>
<li v-for="(item,index) in arr">
{{index}},城市：{{item}}
</li>
</ul>
<ul>
<li v-for="i in arr2">
名字：{{i.name}}
</li>
</ul>
</div>
var app = new Vue({
el: '#app',
data: {
arr: ["北","上","广","深","杭"],
arr2: [
{name:"张"},
{name:"王"},
{name:"李"},
{name:"赵"}
]
}
})
键盘回车事件
<div id="app">
<input type="text" @keyup.enter="go('666')" />
</div>
var app = new Vue({
el: '#app',
methods:{
go: function(v1){
console.log("gogogo" + v1)
}
}
})
v-model
作用：获取和设置表单元素的值（双向数据绑定）
<div id="app">
<input type="text" v-model="message" @keyup.enter="go" />
<input type="button" @click="edit" value="更改" />
{{message}}
</div>
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods:{
go:function(){
console.log(this.message)
},
edit:function(){
this.message = 'hello Vue'
}
}
})
四、组件
官网上的图：第一层代表整个页面，第二层代表这个页面分三大块，第三层是具体每块里的干货
<div id="app">
<gogogo v-for="item in items" v-bind:go="item"></gogogo>
</div>
Vue.component("gogogo",{
props: ["go"],
template: "<ul><li>{{go}}</li></ul>"
});
var app = new Vue({
el: '#app',
data: {
items: ["吃","吃x2","吃x3"]
},
methods:{
}
})
五、Axios通信
准备好json
{
"name": "break",
"url": "127.0.0.1",
"page": 1,
"isDel": false,
"addr": {
"country": "cn",
"city": "longcheng"
},
"links": [{
"name": "百度",
"url": "www.baidu.com"
},
{
"name": "腾讯",
"url": "www.qq.com"
}
]
}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app"></div>
var app = new Vue({
el: '#app',
mounted() {//钩子函数
axios.get("json/test.json").then(response=>(console.log(response.data)))
}
})
拿值
<div id="app">
{{info.name}}
{{info.addr.city}}
</div>
var app = new Vue({
el: '#app',
data(){
return{
info: {
name: null,
addr: {
city: null
}
}
}
},
mounted() {//钩子函数
axios.get("json/test.json").then(response=>(this.info = response.data))
}
})
解决生命周期中出现模板的问题/闪烁问题（用空白替换）
<head>
<meta charset="utf-8" />
<title></title>
<style>
[v-clock]{
display: none;
}
</style>
</head>
<body>
<div id="app" v-clock>
{{info.name}}
{{info.addr.city}}
</div>
</body>
六、计算属性
计算属性可以想象成缓存，具体理解看下边代码
html
<div id="app" v-clock>
{{go()}}
<br />
{{go2}}
</div>
js
var app = new Vue({
el: '#app',
data: {
message: "123456"
},
methods: {
go: function(){
return Date.now()
}
},
computed: {
go2: function(){
return Date.now()
}
}
})
调用，go是方法，而go2是属性，并且go2跟缓存类似，值不变
如果稍微改一下计算属性的方法，属性值就变了
computed: {
go2: function(){
this.message
return Date.now()
}
}
七、slot插槽
顾名思义，首先联想到的就是usb口，可动态插拔，在slot也差不多，玩的就是可复用
下来理解它
<div id="app" v-clock>
<p>某列表</p>
<ul>
<li>值1</li>
<li>值2</li>
<li>值3</li>
</ul>
</div>
p里的text和li里的text都是从data里边来的，ul是不变的
html
<div id="app">
<go>
<go-title slot="go-title" :title="title"></go-title>
<go-items slot="go-items" v-for="item in items" :item="item"></go-items>
</go>
</div>
js
//slot:插槽
Vue.component("go",{
template: '<div>\
<slot name="go-title"></slot>\
<ul>\
<slot name="go-items"></slot>\
</ul>\
</div>'
});
Vue.component("go-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("go-items",{
props: ['item'],
template: '<li>{{item}}<li>'
});
var app = new Vue({
el: '#app',
data: {
title: "标题",
items: ["a","b","c"]
}
});
八、自定义事件内容分发
重点是this.$emit()
<div id="app">
<go>
<go-title slot="go-title" :title="title"></go-title>
<go-items slot="go-items" v-for="(item,index) in items"
:item="item" :index="index" @re="remove(index)"></go-items>
</go>
</div>
//slot:插槽
Vue.component("go",{
template: '<div>\
<slot name="go-title"></slot>\
<ul>\
<slot name="go-items"></slot>\
</ul>\
</div>'
});
Vue.component("go-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
Vue.component("go-items",{
props: ['item','index'],
//只能绑定当前组件的方法
template: '<li>{{index}}----{{item}}<button @click="remove">删除</button><li>',
methods: {
remove: function(index){
this.$emit("re",index);//自定义事件分发
}
}
});
var app = new Vue({
el: '#app',
data: {
title: "标题",
items: ["a","b","c"]
},
methods: {
remove: function(index){
console.log(this.items[index]);
this.items.splice(index,1);
}
}
});
扫一扫
1万+
到【灌水乐园】发言
