1、创建vue实例
在vue中介绍了引用方法：https://cn.vuejs.org。此处下载了离线vue.js。
通过script标签引入vue.js，最好再head里引入，避免页面抖屏。
原生js/jQuery处理节点的方法(手动处理DOM)：
//通过以下方法获取root标签，定义到dom变量中
var dom = document.getElementById(“root”)
//在dom里加入内容
dom.innerHTML=”hello world”
vue中的创建节点方法：
在DOM上面声明，在id=“root”的标签里需要使用msg这个数据。然后在创建的vue实例中定义好msg数据，再通过el与dom进行绑定，则可实现dom里msg的显示。（vue实例与挂载点的绑定）
特点：在vue编写时，不会有dom的操作，着重于数据的编写。由vue来接管dom操作，来替换标签中的占位符。
2、挂载点、模板与实例
挂载点：
div标签（最外层）：（称为）vue实例的挂载点
el（element元素）：与div标签的id对应
挂载点作用：vue只会处理挂载点下面的内容
一句话描述挂载点：vue实例中的el属性对应的id所对应的dom节点
模板：
挂载点内部的内容（既可以写在挂载点内部，也可以写在vue实例的template属性里面。）
在挂载点下面的内容，叫做模板内容。模板还可以放在vue实例的template中编写。
vue会自动结合模板+数据，形成最后在dom里显示的内容，放在挂载点中。
3、vue实例中的数据、事件和方法
{{}} 称作插值表达式，意为将定义的数值插入到标签中
几种不同的写法：
v-text=“number” 绑定的是变量
v-html=“number”
v-on 绑定事件
v-on：click=“（）=>{alert（123）}” 绑定点击事件，绑定箭头函数（会报错，未定义）：正确写法：v-on：click=“handleClick”绑定方法 或者 @click...（v-on： 简写为 @）
方法定义在实例中的methods里，定义handleClick：function（）{alert（123）}
实现：点击后将页面中的hello变成world（在methods里面改变实例数据中的content）
使用this.content=“world”（this.content指的是vue实例下的数据content变量，算是一个简短的别名）
vue的不同：
面向数据，而非面向DOM。当数据改变时，DOM就改变了
实例里的数据展示、触发方法
1、事件触发，实现方法。
2、方法触发之后，想让页面发生变化，只需要通过this.content改变vue实例中的数据。vue会监听到实例中数据的改变，从而更新模板，实现页面更新。
3、content的写法：
插值表达式：{{}}
<div v-text=“content”></div>
<div v-html=“content”></div>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>Vue入门</title>
</head>
<body>
<div id="root">
<div @click="handleClick">{{content}}</div>
</div>
<script>
new Vue({ //创建vue实例
el:"#root", //挂载点：让vue实例接管页面上id="root"的DOM节点 #指的是id=""的DOM元素
data: {
content: "hello world"
},
methods: {
handleClick: function() {
this.content = "moira"
}
}
})
</script>
</body>
</html>
4、vue中的属性绑定和双向数据绑定
v-bind： 属性绑定 （：）
v-on： 事件监听 （@）
v-model 双向数据绑定 （通常在输入框，动态绑定实例中的数据）
实现：
属性绑定：绑定动态title
双向数据绑定：一个title 一个输入框 一个与输入框数据绑定的显示
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>Vue入门</title>
</head>
<body>
<div id="root">
<div :title="title">Hello World</div>
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({ //创建vue实例
el:"#root", //挂载点：让vue实例接管页面上id="root"的DOM节点 #指的是id=""的DOM元素
data: {
title: "text",
content: "this is the text"
}
})
</script>
</body>
</html>
5、vue中的计算属性和侦听器
computed：一个属性由另外属性数据计算而来（特点：若依赖属性不变，则会使用缓存值，当依赖属性改变时才会重新计算、刷新，故计算属性的性能高）
侦听器：watch（） 监听数据变化，若数据变化，则可在侦听器里实现业务逻辑
实现：
输入姓、名，自动显示成姓名。每次改变输入，累加数值。
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>Vue入门</title>
</head>
<body>
<div id="root">
姓：<input v-model="firstName" />
名：<input v-model="lastName"/>
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({ //创建vue实例
el:"#root", //挂载点：让vue实例接管页面上id="root"的DOM节点 #指的是id=""的DOM元素
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function() {
return this.firstName + ' ' + this.lastName
}
},
watch: {
fullName: function() {
this.count ++
}
}
})
</script>
</body>
</html>
6、v-if、v-show与v-for指令
v-for=“item of list” 循环list列表中的项，放入item中。最后可输出item。
用v-for时，必须使用:key=“”（可以提升每一次渲染的效率。注意，每一次循环的key值不能一样，可以用item也可以用index，视具体情况来定）
v-for=“(item,index) of list” 循环list数据列表，每一项数值放入item中，下标放到index中
v-if：控制DOM的存在与否
v-show: 控制DOM的显示与否
v-for：在DOM上循环显示数据
：key 可以提交循环效率，每一次循环都要不同
item 内容 index 下标
实现：
一行文本：hello world
一个按钮：toggle 点击则更换显示状态
一个列表，显示实例中的数组数据
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./vue.js"></script>
<meta charset="UTF-8">
<title>Vue入门</title>
</head>
<body>
<div id="root">
<div v-show="show">{{msg}}</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({ //创建vue实例
el:"#root", //挂载点：让vue实例接管页面上id="root"的DOM节点 #指的是id=""的DOM元素
data: {
msg: "Hello, World!",
show: true,
list: [1,2,3]
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
网友评论