接下来我将会用大量篇幅去写vue的学习过程
首先如何写一个hello world
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = 'app'>
<div>{{name}}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
//创建vue实例
let app = new Vue({
el:'#app',
data:{
name:'Hello World',
}
})
</script>
</html>
接下来就是学习事件绑定，很简单，直接去调用即可
我这里举例说明一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE学习</title>
</head>
<body>
<div id = 'app'>
<!-- <div v-on:click="test1">点击</div>
<button v-on:click="test2">点击</button> -->
<button @click="test4">点击</button>
<button v-on:click="test3('我喜欢你')">点击大胆表白</button>
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
},
methods:{
test1:function(){
console.log('点击')
},
test2(){
alert('点击1')
},
test3(name){
alert(name + '狗亲亲')
},
test4(e){
alert(e.target.innerHTML)
}
}
})
</script>
</body>
</html>当我们点击test3的时候，会发现有alert的弹出，那么这就相当于出发了弹窗，触发了事件
那么我来详细的解释一下alert(e.target.innerHTML)这句话的详细含义，我先分开讲解，alert就是弹窗，e代表事件对象，那么target代表目标，触发事件的DOM模式。那么innerhtml就很好理解了。就说获取到内容。
接下来还要就是如果存在不同的情况下应该怎么办呢
直接上代码示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE学习</title>
</head>
<body>
<div id = 'app'>
<button v-on:click="test5(11,$event)">点击</button> -->
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
},
methods:{
test5(x,y){
console.log(x);
alert(y.target.innerHTML);
}
}
})
</script>
</body>
</html>可以很清楚的看到有一个$event的时间绑定用来出发，如何触发的和上面的内容是一样的可以自行查看
接下来新的内容就是关于循环判断还要分支
先写判断，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = 'app'>
<div v-if="face>=80">长得漂亮</div>
<div v-else-if="face >=70 && face <= 80">长得还行</div>
<div v-else-if="face >=40 && face <70">长得能看</div>
<div v-if="face <40">长得抽象</div>
</div>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
face:70
}
})
</script>
</body>
</html>很清楚的可以看到内容的展示是 
接下来是v-for循环的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = 'app'>
<div v-if="face>=80">长得漂亮</div>
<div v-if="face >=70 && face <= 80">长得还行</div>
<div v-if="face >=40 && face <70">长得能看</div>
<div v-if="face <40">长得抽象</div>
<ul>
<li v-for="it in hobby">{{it}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
face:70,
hobby:['篮球','足球','乒乓球']
}
})
</script>
</body>
</html>这是一种写法，但是里面没KEY值，推荐加上，为什么呢，因为加上之后他的检索的速度更快，对于网站开发有利 当然不写也可以，但是最好写
如果是俩个怎么办呢？当然是有写法的。直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id = 'app'>
<div v-if="face>=80">长得漂亮</div>
<div v-if="face >=70 && face <= 80">长得还行</div>
<div v-if="face >=40 && face <70">长得能看</div>
<div v-if="face <40">长得抽象</div>
<ul>
<li v-for="(it,id) in hobby">{{it}}{{id}}</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
face:70,
hobby:['篮球','足球','乒乓球'],
}
})
</script>
</body>
</html>这样反馈回来的结果是 
接下来学习事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接示例</title>
</head>
<body>
<div id='app'>
<a href="https://baidu.com">baidu一下</a>
<a v-bind:href='url'>京东</a>
</div>
<script src="../day01/js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data() {
return {
url: 'https://www.jd.com'
};
}
});
</script>
</body>
</html>我们可以很清楚的发现，url的值是可以改变的
或者可以这样写，我刚刚上面是AI修正后的结果，下面的版本更好一些
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接示例</title>
</head>
<body>
<div id='app'>
<a v-bind:href='url'>京东</a>
</div>
<script src="../day01/js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data:{
url: 'https://www.jd.com'
}
});
</script>
</body>
</html>接下来你的页面应该弹出来
当然我们因此也可以做一些简单的修改，比如访问的时候根据按钮可以做一些简单的调整
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接示例</title>
</head>
<body>
<div id='app'>
<a v-bind:href='url'>京东</a><br />
<a :href="url">京东</a><br />
<button @click="ch">点击修改</button>
</div>
<script src="../day01/js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data:{
url: 'https://www.jd.com'
},
methods:{
ch(){
this.url='http://baidu.com'
}
}
});
</script>
</body>
</html>
评论 (0)