Vue.js
1.Vue.js
1.1 Vue.js 介绍
1.1.1 Vue.js是什么? Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,
Vue 被设计 为可以自底向上逐层应用. Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一 方面,当与
现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
自底向上逐层应用:作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。
官方网站: https://cn.vuejs.org/v2/guide/ 作者 尤雨溪是中国人.
VSCode插件:
1.1.2 为甚么使用Vue?
- 声明式渲染: 前后端分离是未来趋势
- 渐进式框架: 适用于各种业务需求
- 简单易学: 国人开发,中文文档,不存在语言障碍,易于理解和学习
1.2 Vue.js 基础
1.2.1 Vue.js的使用
- 在html页面使用script引入vue.js的库即可使用。
远程CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>
- Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形
1.2.2 入门程序
创建一个vuetest目录, 并且在目录下创建 01_vue入门程序.html 文件.
代码编写步骤:
- 定义html,引入vue.js
- 定义app div,此区域作为vue的接管区域
- 定义Vue实例,接管app区域。
- 定义model(数据对象)
- 在app中展示数据
<!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>
<!-- 1.通过联网进行引入vue.js-->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<!-- 1.通过本地进行引入vue.js-->
<script src="./js/vue.min.js"></script>
</head>
<body>
<!-- 2. 定义app div,此区域作为vue的接管区域 -->
<div id="app">
<!-- {
{}} 双括号是VUE中的差值表达式,将表达式的值输出到HTML页面 -->
{
{name}}
</div>
</body>
<!-- 创建vue的实例 -->
<script>
//3. 创建vue实例
var VM =new Vue({
//定义 Vue实例挂载的元素节点,表示vue接管该div
el:"#app", //选择器,选择id为app的
//4.定义model模型数据对象
data:{
name:"hello vue!!"
}
});
</script>
</html>
- {
{}}: 插值表达式
- 插值表达式的作用?
通常用来获取Vue实例中定义的数据(data)
属性节点中 不能够使用插值表达式
- 插值表达式的作用?
- el: 挂载点
- el的作用 ?
定义 Vue实例挂载的元素节点,表示vue接管该区域 - Vue的作用范围是什么 ?
Vue会管理el选项命中的元素,及其内部元素 - el选择挂载点时,是否可以使用其他选择器 ?
可以,但是建议使用 ID选择器 - 是否可以设置其他的DOM元素进行关联 ?
可以但是建议选择DIV, 不能使用HTML和Body标签
- el的作用 ?
- data: 数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型
- 渲染复杂类型数据的时候,遵守js语法
<!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>
<!-- 1.通过联网进行引入vue.js-->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<!-- 1.通过本地进行引入vue.js-->
<script src="./js/vue.min.js"></script>
</head>
<body>
<!-- 创建id为APP 的div -->
<div id="app">
{
{name}}<br />
{
{school.name}}{
{school.mobile}}<br />
<ul>
<li>{
{names[0]}}</li>
<li>{
{names[1]}}</li>
<li>{
{names[2]}}</li>
</ul>
</div>
</body>
<!-- 创建vue的实例 -->
<script>
var VM = new Vue({
el: '#app',
data: {
name: '你好世界 我不好',
//对象类型
school: {
name: '拉钩教育',
mobile: '1001001',
},
//数组类型
names: ['尼古拉斯', '张三', '凯莎'],
},
});
</script>
</html>
1.2.3 声明式渲染的好处
Vue中的声明式渲染,简单理解就是我们声明数据,Vue帮我们将数据渲染到HTML.
<!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">
<h2>{
{name}}</h2>
</div>
<!--jQuery中,如果 DOM 发生变化, js代码也需要做相应的改变,高耦合-->
<!-- <script src="./js/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function () {
$('#app').append('<h2>hello Word!</h2>');
});
</script> -->
<!-- 在用 Vue中,只需要定义好展示数据,并把它放在 DOM 合适的位置就可以. -->
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: '#app', //挂载点
data: {
name: 'Hello Word!!',
},
});
</script>
</body>
</html>
1.2.4 Vue常用指令
根据官网的介绍,指令 是带有 v- 前缀的特殊属性。通过指令来操作DOM元素
- v-text 指令
作用: 获取data数据, 设置标签的内容.
注意: 默认写法会替换全部内容,使用插值表达式{ {}}可以替换指定内容.
代码示例:
<!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">
<!-- 插值表达式 不会覆盖原来的内容体 -->
<h2>{
{message}}高薪训练营</h2>
<!-- v-text 获取data数据,设置标签的内容,会覆盖之前的内容体 -->
<h2 v-text="message">高薪训练营</h2>
<!-- 拼接字符串 能进行数字的拼接,无法进行字符串的拼接-->
<h2 v-text="message+1"></h2>
<!-- <h2 v-text="message+abc"></h2> -->
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: '#app',
data: {
message: 'java程序员',
},
});
</script>
</html>
- v-html 指令
作用: 设置元素的 innerHTML (可以向元素中写入新的标签)
代码示例:
<!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>
<style>
/*
v-html指令:设置元素的innerHTML,向元素写入标签
*/
</style>
</head>
<body>
<div id="app">
<!-- 获取普通文本 -->
{
{message}}
<h2 v-text="message"></h2>
<h2 v-html="message"></h2>
<!-- 设置元素的innerHTML -->
<h2 v-html="url"></h2>
<h2 v-text="url"></h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: '#app',
data: {
message: 'java程序员',
url: "<a href='https://wwww.baidu.com'>百度一下</a>",
},
});
</script>
</html>
- v-on 指令
作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click=“方法”
绑定的方法定义在 VUE实例的, method属性中
语法格式
<div id="app">
<!-- 使用v-on 绑定click 点击事件 -->
<input type="button" value="点击按钮" v-on:click="方法名" />
<!-- 使用 @符号也可以绑定-->
<input type="button" value="点击按钮" @click="方法名" />
</div>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el:"#app",
//通过methods ,专门存放Vue中的方法
methods:{
方法名:function(){
alert("123!")
}
})
代码示例
<!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>
<style>
/*
v-on指令:作用是为元素绑定事件
*/
</style>
</head>
<body>
<div id="app">
<!-- 绑定点击事件 -->
<input type="button" value="点击按钮" v-on:click="show" />
<!-- 简写方式 -->
<input type="button" value="点击按钮" @click="show" />
<!-- 绑定双击事件 -->
<input type="button" value="双击按钮" @dblclick="show" />
<!-- 绑定点击事件,修改内容 -->
<h2 @click="changeFood">{
{food}}</h2>
</div>
</body>
<script src="./js/vue.min.js"></script>
<script>
var VM = new Vue({
el: '#app',
data: {
food: '麻辣小龙虾',
},
//通过methods专门存放vue的方法
methods: {
show: function () {
alert('程序员在加班!');
},
changeFood: function () {
//使用this获取data中的数据
//在vue中 不需要考虑如何更改DOM,重点放在修改数据上,数据更新后,使用数据的那个元素也会同步更新
console.log(this.food);
this.food += '真好吃';
},
},
});
</script>
</html>
- 计数器案例
- 编码步骤
- data中定义数据: 比如 num 值为1 2. methods中添加两个方法: 比如add(递增) ,sub(递减) 3. 使用{ {}} 将num设置给 span标签
- 使用v-on 将add,sub 分别绑定给 + ,- 按钮
- 累加到10 停止
- 递减到0 停止
- 页面准备
<!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">
<!-- 计算功能区域 -->
<div>
<input type="button" class="btn btn_plus" />
<span>{
{num}}</span>
<input type="button" class="btn btn_minus" />
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
//创建VUE实例
var VM = new Vue({
el:"#app",
data:{
num:1 }
})
</script>
</body>
</html>
- 案例演示
<!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>
<link rel="stylesheet" href="./css/inputNum.css"/>
</head>
<body>
<div id="app">
<!-- 计算功能区域 -->
<div>
<input type="button" class="btn btn_plus" v-on:click="add"</