Vue学习笔记
VUE
MVVM的实现者
其中最重要的就是ViewModel VieModel是为了实现数据的双向绑定 目的就是为了解耦
VUE就是ViewModel
v-model
单向绑定样例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">{{message}}<br>
<input v-model="message"></div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "yes"
}
});
</script>
</body>
</html>双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">{{message}}<br>
<input v-model="message"></div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "yes"
}
});
</script>
</body>
</html>VUE组件：
可以进行复用
整个页面由组件构成的
自定义组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<my-li v-for="item in items" v-bind:name="item"></my-li>
</div>
<script type="text/javascript">
//建立自定义组件
Vue.component("my-li", {
props: ['name'],
template: "<li>{{name}}</li>"
});
//将div设置为VUE
var vm = new Vue({
el: "#app",
data: {
items: ["xiaow", "zhongw", "daw"]
}
});
</script>
</body>
</html>v-bind: 进行绑定值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<todo>
<mytitle slot="todo-title"></mytitle>
<items slot="todo-items"></items>
</todo>
</div>
</body>
<script>
Vue.component("todo", {
template: "<div>\
<slot name='todo-title'></slot>\
<ul>\
<slot name='todo-items'></slot>\
</ul>\
</div>\
"
});
Vue.component("mytitle", {
template: "<h1>待办事项</h1>\
"
});
Vue.component("items", {
template: "<li>待办事项</li>\
"
});
var vm = new Vue({
el: "#app"
});
</script>
</html>solt（插槽）类似展位标识，可以在solt位置填充数据
vue计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
{{getCurrentTime1()}}:{{getCurrentTime2()}}
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
getCurrentTime1: function() {
return Date.now();
}
}
,computed:{
getCurrentTime2: function() {
return Date.now();
}
}
});
</script>
</body>
</html>计算属性：即第一次查询的时候需要通过方法进行获取，随后这个值会存入内存中，在以后调取时在内存中获取，可用于所读取的数据是固定或长时间不会发生改变的
getCurrentTime1就是普通方法
getCurrentTime2就是计算属性
内容分发
Vue.component("todo", {
template: "<div>\
<slot name='todo-title'></slot>\
<ul>\
<slot name='todo-items'></slot>\
</ul>\
</div>\
"
});利用slot作为插槽，在使用时对内部的信息进行填充。
<mytitle slot="todo-title" v-bind:title="title"></mytitle>利用v-bind：进行数据的绑定
多个组件对应一个相同的slot，这些组件在该slot中依次排放。
自定义事件
<items slot="todo-items" v-for="(name,index) in names" v-bind:name="name" v-bind:index="index" v-on:remove="removeitem(index)"></items> remove: function(index) {
this.$emit("remove", index);
}组件的$emit（“remove”,index）可以调用外面的方法，从而实现对外部数据的修改,这里的remove对应的v-on:remove的remove，index传递的参数
v-on:后面拼接的是remove，这个名字在后面
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<todo>
<mytitle slot="todo-title" v-bind:title="title"></mytitle>
<items slot="todo-items" v-for="(name,index) in names" v-bind:name="name" v-bind:index="index" v-on:remove="removeitem(index)"></items>
</todo>
</div>
</body>
<script>
Vue.component("todo", {
template: "<div>\
<slot name='todo-title'></slot>\
<ul>\
<slot name='todo-items'></slot>\
</ul>\
</div>\
"
});
Vue.component("mytitle", {
props: ['title'],
template: "<h1>{{title}}</h1>\
"
});
Vue.component("items", {
props: ["name", "index"],
template: "<li>{{index}}.{{name}}<button @click='remove(index)'>删除</button></li>\
",
methods: {
remove: function(index) {
this.$emit("remove", index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: "大标题",
names: ["喜羊羊", "美羊羊", "沸羊羊"]
},
methods: {
removeitem: function(index) {
this.names.splice(index, 1); //将index开始后的1个删除掉
}
}
});
</script>
</html>创建Vue项目
vue init webpack name 创建项目 所有的安装皆选择n
手动进行安装 npm install --register=https://register.npm.taobao.org
npm run dev 运行项目
VueRouter
从一个组件跳到一个组件—路由
安装vue-route插件
npm install vue-router --save-dev --register=https://register.npm.taobao.org
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-06-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录