来源 2.0官网：https://v2.cn.vuejs.org/
一、什么是 Vue？
官方：是一套用于构建用户界面的渐进式框架
也是前端开发工程师必学的一个框架，和 Angular、React 并称为前端三大主流框架。什么是框架？
我们将 vue 这个框架 看成一辆车
我们把js看成车的零件 我们需要使用js
- 自己写发动机
- 自己写变速箱
- 自己写方向盘
车才会动
框架 就是别人帮我们
- 写好了发动机
- 写好了变速箱
- 写好了方向盘
我们只需要来学习如何使用，车就可以动了
vue 是由 js 语言来创建好的一辆车
我们进阶的学习目的是：学习如何去熟练使用 vue 的基本语法
只有用熟练使用了，才能去了解 vue 这辆车是如何制造的
下次别人问你什么是框架你怎么回答：
框架：就是别人创建好的一套规则
二、如何使用Vue框架？
1. 通过包的形式引入
<script src="./vue.js"></script>
2. 查看是否引入成功
打开网页 在控制台查看是否有 vue 的标识
Download the Vue Devtools extension for a better development experience: vue.js:9323
https://github.com/vuejs/vue-devtools
You are running Vue in development mode. vue.js:9330
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
三、使用vue框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">{{message}}</div>
<!-- 引入Vue -->
<script src="vue.js"></script>
<script>
// 创造vue 也叫实例化vue
new Vue
// el:挂载点
el: '#app',
// data:数据源
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
四、vue 五大指令 （灵魂）
1. 内容渲染指令
- {{}}
# HTML
<div id="app">
{{ message }}
</div>
# JS
# data：vue的数据源
data: {
message: 'Hello Vue!'
}
# 渲染效果
Hello Vue!
2. 双向绑定指令
作用：表单绑定
- v-model
<div id="app">
<input type="text" v-model="value">
<div>{{value}}</div>
</div>
# js
data: {
value: '' // 绑定数据源
}
3. 事件绑定指令
- @click 事件绑定
<div id="app">
<button @click="clickmoney">点击+1</button>
<h2>我的money: {{money}}</h2>
</div>
- methods 事件源
<script>
// 实例化
let app = new Vue({
el: '#app',
data: {
money:1
},
// methods是专门写事件的地方
methods:{
// 事件叫clickmoney
clickmoney(){
this.money ++
}
}
})
</script>
我们需要多少个事件就可以在methods中写多少个函数 如果需要使用就使用@click进行一个绑定
4. 条件渲染指令
可以让内容进行一个显示和隐藏
- v-if
如果为真就会显示 如果为假就会隐藏
<body>
<div id="app">
<button @click="clickflag">点击显示和隐藏</button>
<h2 v-if="flag">我绑定了v-if 可以通过点击按钮让我显示或掩藏</h2>
</div>
<script>
// 实例化
let app = new Vue({
el: '#app',
data: {
flag:true
},
methods:{ // methods是专门写事件的地方
clickflag(){ // 事件叫clickflag
this.flag = !this.flag
}
}
})
</script>
</body>
- v-show
<body>
<div id="app">
<button @click="clickflag">点击显示和隐藏</button>
<h2 v-show="flag">我绑定了v-show 可以通过点击按钮让我显示或掩藏</h2>
</div>
<script>
// 实例化
let app = new Vue({
el: '#app',
data: {
flag:true
},
methods:{ // methods是专门写事件的地方
clickflag(){ // 事件叫clickflag
this.flag = !this.flag
}
}
})
</script>
</body>
- 面试题考的比较多 v-show和v-if的区别：
让元素显示和隐藏的手段不同 具体在开发中 怎么用 - v-show是通过css diaplay：none来显示和隐藏
- v-if是通过删除和添加dom元素 来显示和隐藏
5. 列表渲染指令
- v-for
- id：唯一标识符 不加上不会报错 加上会提升性能
<body>
<div id="app">
<!-- 可以通过v-for的方式 将list的数据遍历出来 -->
<div v-for="item in list" :key="item.id">
<div>{{item.name}}</div>
<div>{{item.age}}</div>
</div>
</div>
<script>
// 实例化
let app = new Vue({
el: '#app',
data: {
list: [
{
id:1,
name: 'twitch',
age: '18'
},
{
id:2,
name: 'twitch1',
age: '18'
},
{
id:3,
name: 'twitch2',
age: '18'
}
]
},
})
</script>
</body>
练习：
1.将数据 渲染到页面：
通过 v-for 将数据渲染到页面
list: [
{
id: 1,
name: '潘金莲'
},
{
id: 2,
name: '西门庆'
}
]
2.实战:
- 设计一个按钮，
- 在数据源定义一个数据 value，并将 value 渲染到页面，
- 并给按钮一个事件，每次点击按钮 都让 value 的值加 10。
- 当value的值等于 30 我们让 value 的值隐藏
作业：
vue 来写一个登录效果
提示：双向数据绑定
两个输入框 和一个按钮
已知账号：feihong 密码：123456
要求 ：
点击登录按钮 实现登录
验证成功返回 登录成功
验证失败 返回 登录失败
