文章目录
一、Vue起步
1. MVVM模式是什么
传统的mvp模式
- m层指的是数据层（model）
- v层指的是视图层（view）
- p层指的是控制器
该编码方式一般用于普通操作dom方式，改变视图后通过控制器，进行大量dom操作，调用数据或者操作视图，核心是在p层
mvvm模式
- m层指的是数据层（model）
- v层指的是视图层（view）
- vm层指的是vue自带的层（viewmodel）
也就是说使用vue进行前端开发，我们只需要关心view层和Model层就行，操作dom就由vue来实现。在vm层中的实现主要使用了es5的object.definproperties和虚拟dom的机制。
2. 创建一个vue实例
new一个Vue实例（也就是根实例）- 初始化Vue实例的配置项参数：
- el （Vue实例接管dom元素，也就是说使用vue，就无需使用js的dom操作了），
- data（数据），
{ {}}输出数据，只有被Vue实例接管的dom节点才能输出。- $data 是 data的别名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个vue实例</title>
<!-- vue2.5.17 -->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">{
{content}}</div>
<script type="text/javascript">
var app = new Vue({
el: '#app', 实例接管的dom
data: {
content: 'hello world!',
}
});
2秒后，修改显示内容
setTimeout(()=>{
app.$data.content='hello poorpenguin!'},2000);
</script>
</body>
</html>
3. v-model v-on v-for
- v-model 对表单和变量进行双向绑定（哪一方的值改变，另一方也随之改变）
v-model="变量名" - v-on （
v-on:简写@）监听dom事件v-on:事件="方法名"或者@事件="方法名" - v-for 列表渲染
v-for="item in items"或者v-for="(item, index) in items（index为数组项下标）"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="todolist">
<input type="text" v-model="inputValue"/>
<button @click="add">添加</button>
<ul>
<li v-for="item in list">{
{item}}</li>
</ul>
</div>
<script type="text/javascript">
var todolist = new Vue({
el: '#todolist',
data: {
list: [],
inputValue: '',
},
methods: {
add(){
this.list.push(this.inputValue);
this.inputValue = '';
},
}
});
</script>
</body>
</html>
4.组件基础
通过Vue实例接管的dom元素，我们就可以看成是一个组件。相对于全局注册和局部注册的组件来说，Vue实例就是父组件。
- 每一个组件就是一个
vue实例。
4.1 局部组件
局部组件是在局部注册的。
使用一个普通的js对象定义组件，再在Vue实例中注册components:{}。
<div id="todolist">
<input type="text" v-model="inputValue"/>
<button @click="add">添加</button>
<ul>
<to-do-list :content="item" :index="index" v-for="(item, index) in list"></to-do-list>
</ul>
</div>
<script type="text/javascript">
var ToDoList = {
props: ['content','index'],
template: '<li>{
{index}}.{
{content}}</li>',
};
var todolist = new Vue({
el: '#todolist',
components: {
ToDoList: ToDoList, //可以ES6简写 ToDoList,
//或者'to-do-list': ToDoList,
},
data: {
list: [],
inputValue: '',
},
methods: {
add(){
this.list.push(this.inputValue);
this.inputValue = '';
},
}
});
</script>
4.2 全局组件
通过 Vue.component 来创建组件，就是全局注册的组件。
<div id="todolist">
<input type="text" v-model="inputValue"/>
<button @click="add">添加</button>
<ul>
<to-do-list :content="item" :index="index" v-for="(item, index) in list"></to-do-list>
</ul>
</div>
<script type="text/javascript">
Vue.component('to-do-list',{
props: ['content','index'],
template: '<li>{
{index}}.{
{content}}</li>',
});
var todolist = new Vue({
el: '#todolist',
data: {
list: [],
inputValue: '',
},
methods: {
add(){
this
最低0.47元/天 解锁文章
562
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
