Vue.js 的学习过程
第一天的学习
第一段代码主要是理解什么是挂载点，模板和实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title>
<script src="./vue.js"></script>
</head>
<body>
<!-- 挂载点，模板，实例之间的关系 -->
<div id = "root"> <!-- 挂载点 -->
<h1>hello {{msg}}</h1> <!-- 模板，也可以写在实例的template里面 -->
<div v-html="number"></div> <!-- 以上是两种表达方式，两个花括号的表示称作插值表达式 -->
<div @click="handleClick">{{content}}</div> <!-- v-on:的简写是@ -->
</div>
<script>
new Vue({ //vue实例
el: "#root",
data: {
msg: "world!",
number:123,
content:"click"
},
methods: {
handleClick: function(){
this.content = "让你点你就点呀？！";
}
}
})
</script>
</body>
</html>
第二段代码主要是学习属性绑定和双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定和双向数据绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-bind:title="'Leo: ' + title">hello world</div>
<!-- 将鼠标放到hello world上是会出现this is hello world -->
<!-- v-bind:是属性绑定，另外v-band:可以直接用:代替 -->
<input v-model:value="content"/> <!-- 双向绑定 -->
<div>{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
title: "this is hello world",
content: "this is content"
}
})
</script>
</body>
</html>
第三段代码主要是学习计算属性computed与侦听器watch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算属性与侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓<input v-model="firstName" />
名<input v-model="lastName" />
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
firstName: "",
lastName: "",
count: 0
},
computed: { //用methods方法也可以实现，但是computed有一个缓存的机制，性能更佳
fullName: function(){
return this.firstName + ' ' + this.lastName;
}
},
watch: {
fullName: function(){
this.count ++;
}
}
})
</script>
</body>
</html>
第四段代码主要是学习v-if，v-show，v-for的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if, v-show, v-for</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">hello world</div>
<button @click="handleClick">toggle</button>
<!-- 把v-if换成v-show效果不变，但v-if的值是false时是把整个dom删除，而v-show是把dom的css中display值改成none -->
<ul>
<li v-for="(item, index) of list" :key="index">{{item}}</li>
<!-- v-for应该就是循环列表用的，加上:key可以增加渲染的效率，:key不能出现相同的值。 -->
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list: [1, 2, 3]
},
methods: {
handleClick: function(){
this.show = !this.show;
}
}
})
</script>
</body>
</html>
第五段代码主要是学习组件和组件的拆分以及组件与实例的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<todo-item v-for="(item, index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete"> <!-- 用content属性传值 -->
</todo-item>
</ul>
</div>
<script>
//全局组件
Vue.component('todo-item', {
props: ['content', 'index'], //用props接收content的值
template:
'<li @click="handleClick">{{content}}</li>',
methods: {
handleClick: function(){
this.$emit('delete', this.index);
}
}
})
//组件其实也是一个vue实例，一个vue项目里面都是由千千万万个vue实例组成的
//在组件里面也可以写data，methods等东西
//局部组件
// var TodoItem = {
// template: '<li>item</li>'
// }
new Vue({
el: "#root",
// components: {
// 'todo-item': TodoItem
// },
data: {
inputValue: " ",
list: []
},
methods: {
handleSubmit: function(){
this.list.push(this.inputValue);
this.inputValue = "";
},
handleDelete: function(index){
this.list.splice(index,1);
}
}
})
</script>
</body>
</html>
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
