VUE.js的一些介绍
这里写目录标题
- 直接使用
- 双向数据绑定
- 綁定事件
-
- 计算属性
- watch
- 生命周期
- 锚点和路由
直接使用
VUE就是用来渲染的
把一个标签Id给VUE，就会让VUE去做渲染
我们将数据库拿到的数据，交给data，data根据动态变化，提供给标签里渲染。
注意这个细节。
先看看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>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<p>欢迎{{user.username}}</p>
<!--data里放的数据，都可以拿出去，到这个标签里进行渲染-->
</div>
<script src="vue.js">
//引进VUE
new Vue({
el:'#app', //和标签进行绑定
data:{ //需要加入的数据
title:"牛逼",
user:{
username:"无敌",
age:19,
},
},
})
</script>
</body>
</html>
动态属性绑定
就是动态绑定标签上的属性。
VUE
VUE其實就是將從數據庫拿出来的动态属性，渲染到页面上去。
从数据库拿出来的属性，先放在Vue的data里面，然后，从data里拿出去，放在前端页面上进行动态渲染。
<!-- v-bind: 指令的简写形式 : -->
<a :href="site" target="_blank">{{company}}</a>
<input type="text" :value="company">
一个整体训练
<!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>
<body>
<!--动态绑定标签属性-->
<div id="app" >
<a :href="site">{{company}}</a>
<!--data里放的数据，都可以拿出去，到这个标签里进行渲染-->
</div>
<script src="vue.js"></script>
<script >
//引进VUE
new Vue({
el:'#app', //和标签进行绑定
data:{ //需要加入的数据
company:"guigu",
site: 'http://www.atguigu.com',
},
})
</script>
</body>
</html>
双向数据绑定
单向数据绑定很简单，就是单纯的，data中数据渲染了页面，然后我们在页面上修改数据，对data中数据没有任何影响
双向数据绑定很简单：
从data中拿数据，到页面
修改页面中数据的同事data中数据也被修改了
下面那個就是雙向綁定
必须用于用户交互时候。
綁定事件
从Vue里面去拿出事件，绑定在上面进行监听
VUE中，方法必须用Methods去写
<!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>
<body>
<!--动态绑定标签属性-->
<div id="app" >
<!--括号里面是参数-->
<button v-on:click="hello('he')">点击</button>
</div>
<script src="vue.js"></script>
<script >
//引进VUE
new Vue({
el:'#app', //和标签进行绑定
data:{ //需要加入的数据
company:"guigu",
site: 'http://www.atguigu.com',
},
methods:{
hello(username){
alert("hello" + username)
},
}
})
</script>
</body>
</html>
计算属性
应用场景：
页面输入了一个姓，一个名字
我们要将姓名拼一起，然后渲染回页面上。
流程就是，姓和名都跟data中数据双向绑定，然后再Vue里专门设计一个做拼接计算的comput:计算全名，然后交给data中的全名属性，
<body>
<div id="app">
姓: <input placeholder="First Name" v-model="firstName" /><br />
名: <input placeholder="Last Name" v-model="lastName" /><br />
姓名1(单向): <input placeholder="Full Name1" v-model="fullName1" /><br />
姓名2(双向): <input placeholder="Full Name2" v-model="fullName2" /><br />
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstName: 'Helen',
lastName: 'Yao',
// fullName: 'Helen Yao',
},
computed: {
fullName1() {
console.log('计算fullName1')
return this.firstName + ' ' + this.lastName
},
//这是最标准的双向绑定方式
fullName2: {
get() {
console.log('计算fullName2')
return this.firstName + ' ' + this.lastName
},
//当给fullName2指定新值时自动调用：实现双向绑定
//这个value就是get得到的那个值，也会return的那个值，和java一样，得到后再注入
set(value) {
console.log('fullName2 的 setter')
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
},
},
},
})
</script>
</body>
watch
watch是个监视器，Watch谁就和谁保持一致。
监听是为了控制变化，变化后的值，会交给Value
然后根据Value可随时更改改变后的值
根据勾选的条件，对值进行处理
当勾选了ok时候，有下一步
当没有勾选Ok时候，下一步无效。
生命周期
<!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>
<body>
<!--动态绑定标签属性-->
<div id="app" >
<!--括号里面是参数-->
<button v-on:click="hello('he')">点击</button>
</div>
<script src="vue.js"></script>
<script >
//引进VUE
new Vue({
el:'#app', //和标签进行绑定
data:{ //需要加入的数据
//这就是对象中的成员和方法
company:"guigu",
},
created(){
console.log('Vue实例创建完成'),
console.log("creat中获取message的定义" + this.company)
},
mounted(){
console.log("Vue页面渲染")
},
}
)
</script>
</body>
</html>
created和mounted区别在于，
mounted代表也页面渲染，代表页面渲染之后的情况，页面渲染，就意味着Vuedata中数据，替换上去了。
document.getElementById代表，拿出元素中的标签。
锚点和路由
用来跳转的在
錨點：就是設置跳轉的點
路由：就是路的出口，展示你想要跳轉的位置
