文章目录
Vue 实战
一、Vue 引言
渐进式 JavaScript 框架 --摘自官网
渐进式
- 易用:基于标准 HTML、CSS 和 JavaScript 构建,提供容易上手的 API 和一流的文档。
- 高效:vue 体积小 20kB min+gzip 运行大小、超快虚拟 DOM、vue 底层深度优化
- 灵活:vue 生态系统非常强大,vue 基础核心、vue 组件、vue router、vue cli、vuex,不断繁荣的生态系统
总结
Vue 是一个框架 一个javascript 框架 js框架 ===> 简化页面中 js 开发
Vue 的核心库只关注视图层
Bootstrap 是一个 css 框架 封装 css
Vue 的出现可以让我们通过操作很少的 DOM,甚至不需要操作页面中任何 DOM 元素,就很容易完成数据和视图绑定 ===> 双向绑定 MVVM
html + js ====> html + css + jQuery ====> vue (前后端分离) ====> 前端系统 + json + 后端系统
二、Vue 入门
1、下载 Vue.js
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
2、Vue 第一个入门应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h1>{
{msg}}</h1>
<h1>{
{username}}</h1>
<h1>{
{password}}</h1>
<h4>{
{username.toUpperCase()}}</h4>
<h4>{
{username.length}}</h4>
<h4>{
{username == "hello vue"}}</h4>
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<!--书写vue的代码-->
<script>
//创建一个vue实例
var app = new Vue({
el: "#app",//element:用来给Vue实例定义一个作用范围
data: {
//用来给Vue实例定义一些相关数据,自定义各种数据
msg: "Vuejs欢迎你,期待你的加入",
username: "Hello Vue!",
content: "hello vue",
password: "123456"
}
})
</script>
3、Vue 中 data 属性定义对象、数组和相关数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h2>{
{msg}}</h2>
<h2>{
{count}}</h2>
<h2>{
{user.id}} == {
{user.name}} == {
{user.age}} == {
{user.salary}}</h2>
<h2>{
{schools[0]=='北京校区'}} == {
{schools[1]}} == {
{schools[2].length}}</h2>
<h2>{
{users[1].id}} == {
{users[1].name}} == {
{users[2].name}}</h2>
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",//指定vue实例的作用范围
data: {
//用来给vue实例定义一系列数据
msg: "Hello Vue",
count: 0,
user: {
id: 21, name: "小朱", age: 23, salary: 23000.23},
schools: ["北京校区", "上海校区", "广州校区", "深圳校区"],
users: [
{
id: 22, name: "小朱一", age: 23, salary: 23000.23},
{
id: 23, name: "小朱二", age: 24, salary: 24000.23},
{
id: 24, name: "小朱三", age: 25, salary: 25000.23}
]
}
})
</script>
总结
- 一个页面中只能存在一个 Vue 实例 不能创建多个Vue实例
- Vue实例(对象)中 el 属性:代表Vue的作用范围,日后在Vue的作用范围内都可以使用Vue的语法
- Vue实例(对象)中 data 属性:用来给Vue实例绑定一些相关数据,绑定的数据可以通过 { {data属性中变量名}} 直接获取data中变量名对应属性值
- 在使用 { { }} 进行获取data中数据时,可以在 { { }} 中书写表达式,运算符,调用相关方法,以及逻辑运算等
- el 属性中可以书写任意的CSS选择器 [jquery选择器] ,但是在使用Vue开发是推荐使用 id选择器
- 注意: el 属性值不能指定 body 或 html 标签
三、v-text 和 v-html
1、v-text
v-text
:用来获取data
属性中数据,将数据以文本的形式渲染到指定标签内部,类似于 javascript 中 innerText
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h2><span>{
{msg}}</span></h2>
<h2><span v-text="msg"></span></h2>
</div>
</body>
</html>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "北京欢迎你"
}
})
</script>
总结
- { { }} (插值表达式) 和 v-text 获取数据的区别在于:
- 使用 v-text 取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
- 使用 v-text 可以避免在网络环境较差的情况下出现插值闪烁
2、v-html
v-html
:用来获取data
中数据,将数据中含有的html标签先解析再渲染到指定标签的内部,类似于 javascript 中 innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<div id="app">
<h2><span>{
{msg}} xxxx</span></h2>
<h2><span v-text="msg">xxxxx</span></h2>
<h2><span v-html="content">xxxxxx</span></h2>
</div>
</body>
</html>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "北京欢迎您",
content: "<a href=''>北京欢迎您</a>",
},
});
</script>
3、v-text 和 v-html 指令使用
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h2>{
{msg}}</h2>
<h2>{
{msg}} hello {
{msg}} 小朱 {
{msg}}</h2>
<h2>小朱 <span v-text="msg"></span></h2>
<h2 v-html="msg">{
{msg}}</h2>
<h2>{
{content}}</h2>
<h2 v-text="content"></h2>
<h2 v-html="content"></h2>
<!--
v-text 和 v-html:作用:用来获取vue实例中data属性声明的数据
使用语法:在哪个标签上获取直接在哪个标签上定义 v-text v-html
v-text="属性名"
{
{}} 取值 和 v-text 取值区别;
1.{
{}}取值不会将标签原始数据清空 使用v-text取值清空标签原始数据 {
{}}===>这种方式取值 插值表达式
2.{
{}}取值存在插值闪烁 v-text v-html取值 不存在插值闪烁
推荐: 两种方式都可以使用 {
{}} 更加灵活
v-text (innerText)、 v-html (innerHtml)区别:
1.使用v-text取值:直接将获取数据渲染到指定标签中
2.使用v-html取值:先将获取数据进行html标签解析,解析之后在渲染到指定标签中
-->
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "Hello Vue",
content: "<a href='http://www.baidu.com/'>点我查看详细</a>"
}
})
</script>
四、Vue 中事件绑定(v-on)
1、Vue 中绑定事件基本语法的使用
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h2>{
{msg}}</h2>
<h2>{
{age}}</h2>
<!--
js中事件(event):
事件三要素:
事件源:发生特定动作HTML标签
事件:发生特定动作事件 单击事件 onclick ondblclick onmouseover onmouseout keyup keydown .....
监听器:事件处理程序 一般在js中是事件处理函数 function(){}
v-on 指令:
作用:用来给页面中标签绑定事件用的
语法:在对应标签上使用 v-on:事件名="事件处理函数名"
-->
<button v-on:click="test">vue中事件绑定</button>
<input type="button" value="点我改变年龄" v-on:click="changeAge">
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app",//用来指定Vue实例作用范围
data: {
//用来给vue实例绑定一系列数据
msg: "Hello Vue",
age: 20,
},
methods: {
//用来给vue实例绑定一系列函数 方法
test: function () {
//定义一个test函数
alert("vue中test")
},
changeAge: function () {
alert("点击触发"),
console.log(this.age)//代表当前vue实例
this.aa(); //代表调用方法
},
aa: function () {
console.log("调用该方法");
}
}
})
</script>
总结
事件三要素
- 事件源:发生事件dom元素
- 事件:发生特定的动作 click…
- 监听器:发生特定动作之后的事件处理程序 通常是 js 中函数
- 在vue中绑定事件是通过 v-on 指令来完成的
v-on:事件名
如:v-on:click
- 在
v-on:事件名
的赋值语句中是当前事件触发调用的函数名- 在vue中事件的函数统一定义在Vue实例的
methods
属性中- 在vue定义的事件中
this
指的就是当前的Vue实例,日后可以在事件中通过使用this
获取Vue实例中相关数据调用methods中相关方法
v-on
指令基本使用之在函数中获取vue实例本身this
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue系列课程之基础入门</title>
</head>
<body>
<div id="app">
<h2>{
{msg}}</h2>
<!--双向绑定机制 MVVM Model <===> ViewModel(监听器) <===> View(视图)-->
<h2>{
{count}}</h2>
<h2>{
{count}}</h2>
<button v-on:click="test" v-on:mouseover="test1">点我</button>
</div>
</body>
</html>
<!--引入核心js文件-->
<script src="js/vue.js"></script>
<script>
var app = new Vue({
el: "#app", //用来定义数据 Model
data: {
msg: "Hello Vue",
count: 23
},
methods: {
//用来定义方法
test: function () {
//如果在vue定义方法中获取data中数据,注意:在自定义方法中可以直接使用this,this代表当前实例
console.log(this);
console.log(this.msg);
console.log(this.count);
//this.count = this.count+1;
this.count++;
//触发aa事件
this.aa();
},
test1: function () {
//鼠标经过的方法
console.log("test1 mouseover")
},
aa: function () {
console.log("aaa");
}
}
})
</script>
v-on
指令基本使用之在函数中传递参数
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta char