一、vue基本介绍
1、vscode的安装及其相关插件
插件安装示范
2、打开项目
输入！号后自动生成html文件
3、官网了解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>
<!--1.vue的引入,-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!--div标签是数据容器，不带默认样式的-->
<!--2、定义一个容器，给容器标注id，方便后面操作-->
<!--把数据填充到容器中，用{{}}插值法，{{}}中需要包括data中的key，引用message对应的值-->
<div id="app">{{message}}</div>
</body>
</html>
<script>
//实例化vue,，
var vm = new Vue({
//需要传入对象
//把数据填充到页面哪里，填充内容是什么
//el告诉vue,操作哪个标签;使用css选择器，css选择器id为#号，指定挂载的标签为id="app"的
//data 填充的内容
el: "#app",
data: {
message: "Hello World"
}
}
)
</script>4、了解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>
</body>
</html>
<!--js脚本-->
<script>
</script>
<!--css样式表-->
<style></style>HTML三大件 html,script,style.
其中html是页面上看到的，head部分进行网页的设置，定义标题，导入第三库等； body部分是页面上真正要设置的东西；
script放置js脚本，交互的东西，例如请求点击按钮等
style是放置css样式表
5、html标签
基本格式<标签名 属性值1="属性值1" 属性2="属性值2"></标签名>
标签 从常见形式
双标签：<标签名称 ></标签名称>
单便签：<标签名/>
6、HTML标签常用属性
常见全局属性(所有标签可以使用)
id：规定元素的唯一id
class:规定元素的类名
style:规定元素的行内样式
常见其他属性：
click:全局事件属性，当单击鼠标时运行脚本
scr:规定图片的url
href:规定链接的目标url
7、HTML常用标签
注释标签：<!--注释内容-->(快捷键ctrl+/)
标题标签：<h1></h1>
段落标签：<p></p>
容器标签：<div></div>|<span></span>
图像标签：<img/>
超链接标签：<a></a>
表单标签：<input>
二、vue常用指令-输入绑定
1、v-model 双向绑定
- 作用： 实现标签中数据的双向绑定
- 实质：监听元素，根据元素的不同选取不同的 property 抛出不同的事件
- 适用的表单元素：
<input>、<textarea>、<select> - 例子
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=++ , initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg"> <!-- 显示的msg与输入框中的值同步更新 --> <h2>{{msg}}</h2> </div> </body> </html> <script> var vm=new Vue({ el: "#app", data:{ msg:"", } } ) </script>
展示效果
input标签中的msg值得改变会影响data中msg的改变，进而影响插值中<h1>msg中的展示，故称双向绑定
2、 data
- Vue 中的 data 属性专门以对象方式存放数据
- data 有两种写法
- Object 对象（即字典）
- Function 函数
-
<!--第一种：Object--> <script type="text/javascript"> var app = new Vue({ el:"app", data:{ isLogin: false } }) </script> <!--第二种：Function--> <script tyepe="text/javascript"> var app = new Vue({ el:"app", data(){ return { islogin: false } } }) </script>
3、插值
- 文本：Mustache 模板语法
<span>{{message}}</sapn>
- HTML 代码
<span v-html="rawHtml"></span>-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=++ , initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg"> <!-- 显示的msg与输入框中的值同步更新 --> <h2>{{msg}}</h2> <!-- 使用 v-html绑定原生的HTML代码 --> <span v-html="rawHTML"></span> </div> </body> </html> <script> var vm=new Vue({ el: "#app", data:{ msg:"", //原生HTML代码块 rawHTML:'<span style="color:red">这是一个个红色的字体</span>' } } ) </script>展示效果如下
-
- 使用 JavaScript 表达式
{{ ok ? 'YES' : 'NO' }}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=++
, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<!-- 显示的msg与输入框中的值同步更新 -->
<h2>{{msg}}</h2>
<!-- 使用 v-html绑定原生的HTML代码 -->
<span v-html="rawHTML"></span>
<!-- 使用js表达式 ,三目表达式判断ok，这个变量是否真假，根据真假分别展示不同的值。空值表示为假-->
<div>{{ok?"如果为真，则展示这个值":"如果为假则展示这个值"}}</div>
</div>
</body>
</html>
<script>
var vm=new Vue({
el: "#app",
data:{
msg:"",
//原生HTML代码块
rawHTML:'<span style="color:red">这是一个个红色的字体</span>',
ok:""
}
}
)
</script>
4. v-model 修饰符
.lazy：用于在事件之后进行同步.number：将用户的输入值转换为数值类型
.trim：自动过滤用户输入的首部和尾部的空白字符
三、Vue 常用指令 - 条件渲染
1、v-if 条件渲染
v-if指令用于返回表达式为true的值- 切换多个元素可以使用
<template> v-else指令表示v-if的else部分v-else元素需要在v-if或者v-else-if的元素后面-
<!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> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> <!-- v-if值为true,这个标签里的内容就会展示 v-if的值既可以是变量也可是表达是，但它的结果必须是布尔值 --> <h1 v-if="asHome">如果变量为真则展示这段话</h1> <h1 v-else>如果变量为假则展示这段话呀呀呀 这是else分支</h1> <template v-if="asHome"> <h1>如果变量为真则展示这段话1111</h1> <p>如果变量为真则展示这段话2222</p> </template> </div> </body> <script> var vm=new Vue( { el:"#app", data:{ asHome:false } } ) </script> </html>变量为真则展示效果如下：
-
变量为假则展示效果如下：
-
2、v-show
- 根据表达式的值，切换元素
display的 CSS 属性值 -
<!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> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 修改 display 的属性值 --> <div v-show="isShow">true 可以显示</div> <div v-show="isShow">false 不可以显示</div> </div> </body> </html> <script> var vm = new Vue({ el: "#app", data: { isShow: true }, }); </script>
3、v-if 和 v-show 区别
-
v-if通过操纵dom元素来进行切换显示- 表达式的值为
true时，元素存在于dom树中 - 表达式的值为
false时，元素从dom树中移除
- 表达式的值为
-
v-show只是简单控制dom元素的display属性- 渲染
HTML元素，符合条件时显示，不符合条件display为none，元素还在dom树
- 渲染
-
四、Vue 常用指令 - 事件处理
-
1、v-on 简介
- 复杂的功能必须与用户交互，用户交互通过事件来完成，事件来处理操作
- 作用：绑定事件监听器
- 表达式：方法或者内联语句
- 简写：
@ -
<!--v-on 指令写法--> <input type='button' v-on:click='num++'> <!--简写形式--> <input type='button' @click='num++'> <!--v-on 绑定函数名称--> <input type='button' @click='func'> <!--v-on 绑定函数调用--> <input type='button' @click='func()'>
2、methods 简介
- 作用：定义方法
-
var vm = new Vue({ data(){ } methods:{ // 在此定义方法，方法之间用逗号分隔 function1(){}, function2(){} } }) - this：指向该方法所属的实例，可以访问 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> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> <div>{{num}}</div> <!-- 绑定函数名的方法 --> <input type="button" value="点击按钮加一" v-on:click="add"> <!-- 绑定函数调用 --> <input type="button" value="点击按钮加二" @click="add2(2)"> </div> </body> </html> <script> var vm=new Vue({ el:"#app", data:{ num:1, }, //定义方法 methods:{ add: function(){ this.num++ ; }, // 传入参数 add2: function(num1){ this.num=this.num+num1 //打印日志 console.log(num1) ; } } } ) </script>
五、Vue 常用指令 - 属性绑定
-
1、v-bind 简介
- v-bind 主要用于属性绑定
- 简写：
:<!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> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 绑定图形的背景,通过css制定，width 宽 height 高 boder 边框 solid 实线 #000 黑色 --> <div style="width: 100px;height: 100px;border: 1px solid #000" v-bind:style="bgcolor"> <a :href="baidu">访问百度</a> </div> </div> </body> </html> <script> var vm = new Vue({ el: "#app", data: { // 设置图形背景色 bgcolor:{ backgroundColor:'blue' }, //绑定超链接为百度首页 baidu:"https://www.baidu.com" }, }); </script> -
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>
六、Vue 常用指令 - 列表渲染
- v-for 指令可以基于一个数组来渲染一个列表
- v-for 指令还可以通过一个对象的属性来迭代数据
- 需要使用
item in items形式的特殊语法 - items 是源数据数组，而 item 则是被迭代的数组元素的别名
l例子
<!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>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in list">{{item}}</div>
<li v-for="(item, index) in list">
{{index}} - {{item}}
</li>
<li v-for="item in items">{{item}}</li>
<li v-for="(item, key) in items">
{{key}} : {{item}}
</li>
<li v-for="(item, key, index) in items">
{{index}} : {{key}} : {{item}}
</li>
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data: {
list: [1, 2, 3],
items: {
one: '第一组',
two: '第二组',
three: '第三组'
}
}
});
</script>
七、vue环境安装
- 前端项目需要工程化管理
- 使用 Vue 脚手架工具可以简化项目创建过程
- 可以专注于代码，不用关心项目创建和配置的细节
- 之前的学习基础指令的时候，都是在 html 当中。但是我们不可能把工程化的项目都写在单个的 html 当中对吧。这样不符合工程管理的模式
vue安装前需要有node.js工具，若无安装，可参考此博主的node.js安装部分
vue.js 三种方式安装(vue-cli)_安装vue-cli_muzidigbig的博客-CSDN博客
- 安装 vue-cli
npm install -g @vue/cli- -g 代表全局安装，如果不加 -g ，会在当前目录安装
- 命令执行完毕后，可以验证一下是否安装成功。
- vue --version
- 如果可以看到版本号，就说明脚手架已经成功安装到本地环境中了
vue create 后面要加上你的项目名称，现在我们的项目就命名为 test_fronted，这里需要注意，项目名称中不要包含中文。
vue create test_fronted
执行完这条命令，就可以进入交互式的界面，在这里我们可以使用键盘的上下箭头来切换不同的选项。
image.png
这里我们保持第一个 defalut 选项就可以了，因为后面我们要使用 vue 2，回车，等待安装过程就可以。
中间会有一些报错信息，这个不用担心，只要最后的结果是 success 就没有问题。
image.png
到这里，我们就通过了 vue 的脚手架工具把项目创建成功了。
我们可以进入到项目的目录，可以看到有这样一些目录和文件
怎么启动这个项目呢？很简单，执行一条命令就可以
npm run serve点击本地链接，就可以看到本地 vue 项目的页面了。到这里，我们就成功的通过命令行的方式创建了 Vue 的项目。
ctrl + c 退出服务
除了这种命令行方式之外，我们还可以通过图形化界面来创建项目。
图形化界面方式创建 Vue 项目
- 命令开启前端项目管理页面
vue ui
- 选择目录和项目名称，使用 npm 包管理工具
刚才我们演示的通过命令行创建项目的方式，相对来说不是很方便，因为面对的是交互式的命令行。下面我们就来看看怎么能通过界面化的方式更方便的来创建项目。
首先，我们需要进入终端，输入命令
vue ui进入 Vue 项目管理器页面
首先确定项目要创建的路径，然后点击【在此创建新项目】按钮，进入项目创建页面。
先确定项目名称：vue_prac，其他可以先不操作，然后点击下一步。
然后选择 vue2 项目，选择预制好的配置即可，点击创建项目。
项目创建好之后，就可以进入项目仪表盘页面了。
点击侧边栏的任务按钮，选择 serve，点击运行，项目就开始编译。编译成功后，可以看到项目详细信息
点击启动 app 按钮，项目就运行起来了，自动跳转到项目根目录的页面。
如果要停止项目，可以点击 serve 页面的停止按钮。
在项目仪表盘页面，还可以完成插件和依赖的安装和配置。这个我们后面要用的时候给大家做介绍。
现在，我们已经学会了用命令行和 UI 界面来创建项目。那创建好的项目中都包含哪些内容呢？
Vue 项目结构
- node_module：用来装一些依赖库的，类似于 python 中的 venv
- public：是用来存放一些静态资源的。
- src：项目目录
- assets：资源（图片）
- components：存放公共组件的地方
- App.vue：根组件
- main.js：项目入口， 相当于 Python 的 main
- package-lock.json：依赖的详细信息
- package.json：包依赖文件，存放的是依赖的包版本，相当于 Python 的 requirements.txt
一般来说前两个都是自动生成的，我们一般不用动。那我们一般会动哪里呢？我们写的代码一般是在 src 中。所以说我们重点关注的地方都在 src 里面。
八、Vue 基础架构
1、Vue 组件基本结构
- template：模板，基本 HTML
- script：脚本
- data：数据
- methods：方法
- style：样式
<!--模板，基本 HTML-->
<template>
</template>
<!--script 脚本-->
<script>
export default {
// 定义数据
data: () => ({
}),
// 定义方法
methods: {
},
};
</script>
<!--css 样式-->
<style scoped></style>九、Vue页面组件-Vuetify
1、Vue页面组件-Vuetify
- 官方文档：vuetifyjs.com/zh-Hans
- Vuetify 负责 UI 界面
win+r 输入cmd
输入vue ui
验证是否安装成功
点击启动app
此时的页面的css样式发生改变
官网中提供了相当多的组件
十、Vuetify 页面布局
1、什么是页面布局
2、基本布局
- v-app：应用程序的根节点,其实就是替换了默认vue的入口
- v-main：正文内容区域 vue挂载到dom的时候，调整容器的大小
-
<!--应用程序的根节点--> <v-app> <!--正文内容区域--> <v-main> Hello World </v-main> </v-app>
-
更改app.vue
更改app.vue的效果
-
-
3、使用应用程序布局
- UI 组件地址：Vuetify — A Material Design Framework for Vue.js
- 标签作用
- v-app-bar：放在应用顶部
- v-navigation-drawer：可以放置在应用的左边或右边，并且可以配置在 v-app-bar 的旁边或下面
- v-footer：放在应用底
- 可以用属性来控制组件的位置
-
十一、Vuetify 组件使用
1、抽屉导航
<template> <!-- 卡片样式 --> <v-card height="400" width="256" class="mx-auto" > <!-- 导航栏样式 --> <v-navigation-drawer permanent> <v-list-item> <v-list-item-content> <v-list-item-title class="text-h6"> Application </v-list-item-title> <v-list-item-subtitle> subtext </v-list-item-subtitle> </v-list-item-content> </v-list-item> <!-- v-divider为分割线 --> <v-divider></v-divider> <!-- dense减少高度，使导航页更加紧凑。减少告诉 --> <!-- nav减少宽度，棱角话--> <v-list dense nav > <!-- 数据列表样式 --> <!-- v-for：循环遍历变量； :key：绑定变量中每个元素的 title 字段--> <v-list-item v-for="item in items" :key="item.title" link > <v-list-item-icon> <v-icon>{{ item.icon }}</v-icon> </v-list-item-icon> <v-list-item-content> <v-list-item-title>{{ item.title }}</v-list-item-title> </v-list-item-content> </v-list-item> </v-list> </v-navigation-drawer> </v-card> </template> <script> export default { data () { return { // 列表数据 // title 导航文案，icon 导航图标 items: [ { title: 'Dashboard', icon: 'mdi-view-dashboard' }, { title: 'Photos', icon: 'mdi-image' }, { title: 'About', icon: 'mdi-help-box' }, ], right: null, } }, } </script>
2、按钮
-
<template> <!-- 设置对齐方式 --> <v-row align="center" justify="space-around"> <!-- 普通样式按钮 --> <v-btn>Normal</v-btn> <!-- 重要样式按钮 --> <v-btn color="primary">Primary</v-btn> <!-- 错误样式按钮 --> <v-btn color="error">Error</v-btn> <!-- 不可用样式按钮 --> <v-btn disabled>Disabled</v-btn> </v-row> </template>
3、表格
-
<template> <!-- 数据表格样式 --> <!-- headers：表头； items：数据；items-per-page：每页展示数据数量--> <v-data-table :headers="headers" :items="desserts" :items-per-page="5" class="elevation-1" ></v-data-table> </template> <script> export default { // 数据 data () { return { // 表头 headers: [ { text: 'Dessert (100g serving)', align: 'start', sortable: false, value: 'name', }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Iron (%)', value: 'iron' }, ], // 数据 desserts: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%', }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%', }, ], } }, } </script>十二、vue路由-router
1、路由基本概念
- 路由的本质就是对应关系
- 开发中，路由分为后端路由和前端路由
- 后端路由：
- 根据用户不同的 URL 请求，返回不同的关系
前端路由：
- 根据不同的用户事件，显示不同的页面关系
2、Vue Router 简介
- Vue.js 官方提供的路由管理器
- 包含的主要功能有：
- 支持 HTML5 历史模式或 hash 模式
- 支持嵌套路由
- 支持路由参数
- 支持编程时导航
- 支持命名路
-
3、Vue Router 安装
- 使用
vue ui安装 Vue Router - 插件是 安装到项目上的。如果新项目需要重新安装项目
4、Vue Router 使用
<router-link>：支持用户在具有路由功能的应用中点击导航to：指定目标地址(必选)
<router-view/>：显示与 url 对应的组件-
// router 路径下的 index.js const routes = [ // path 代表路由地址 // name 表示这个路由的名称 // component 表示这个路由和哪个页面关联 { path: '/', name: 'Home', component: HomeView }, ]安装好的router中有一个index.js
-
-
安装完router后会重写app.vue
-
（app.vue是整个项目的入口文件，负责构建定义及页面组件，所有路径的页面都会带有）
项目中路由是由router管理的，router中有一个index.js定义了所有的路由
十三、路由 - 编程式导航
1、页面导航的两种方式
- 声明式导航：通过点击链接的方式实现的导航
- vue 组件中的
<router-link to="/user"></router-link>
- vue 组件中的
- 编程式导航：调用 JavaScript 的 api 方法实现导航
this.$router.push();this.$router.go();
用的比较多的是编程式导航
- 字符串(路径名称)
- 对象
- 命名的路由(传递参数)
- 带查询参数
-
// 字符串(路径名称) this.$router.push('/register') // 对象 this.$router.push({ path: '/register'}) // 命名的路由(传递参数) this.$router.push({ name: 'register', query: { userId:123, name:'admin'}}) // 带查询参数 this.$router.push({ path: '/register?userId=123&name=admin' })
字符串(路径名称)例子
（1）在页面布局中的顶部栏增加两个按钮，点击按钮完成方法的调用
展示效果
（2）在script中完成方法的定义
点击登录按钮前的页面
点登录按钮展示效果
完整代码如下：
<template>
<!-- App.vue -->
<v-app>
<v-navigation-drawer app>
<!-- -->
</v-navigation-drawer>
<v-app-bar app>
<div>
<v-btn color="primary" @click="toLogin">登录</v-btn>
<v-btn @click="toRegister">注册</v-btn>
<v-btn @click="qianjin">前进</v-btn>
<v-btn @click="houtui">后退</v-btn>
</div>
<!-- -->
</v-app-bar>
<!-- 根据应用组件来调整你的内容 -->
<v-main>
<!-- 给应用提供合适的间距 -->
<v-container fluid>
<!-- 如果使用 vue-router -->
<router-view></router-view>
</v-container>
</v-main>
<v-footer app>
<!-- -->
</v-footer>
</v-app>
</template>
<script>
export default {
methods:{
toLogin(){
this.$router.push("/NewVue/Login")
},
toRegister(){
this.$router.push({path:'/NewVue/resgister'})
},
qianjin(){
this.$router.go(1)
},
houtui(){
this.$$router.go(-1)
}
}
}
</script>
462
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
