Vue（框架）
概述：
是一个轻量级 渐进式的 前端框架
特点: 数据驱动 MVVM 组件化
好处: 封装了DOM操作元素的API
使用步骤：
导入vue.hs文件（Vue框架提供的）
入门案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue框架</title>
<!-- 1. 引入外部的vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2. 准备数据渲染区 {{插值表达式}}-->
<div id="app">
{{msg}}
</div>
<!-- 3. 使用Vue准备数据 -->
<script>
// 3.2 准备即将要在浏览器展示的数据
var d = {
msg:'hello vue~'
}
// 3.1 创建Vue对象
new Vue({
//element的简称,即将把准备好的数据 渲染 到指定区域--挂载点
//#app 是利用CSS的id选择器,选中了一个HTML元素
el:"#app",
data: d //准备即将要在浏览器展示的数据
})
</script>
</body>
</html>
改造入门案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue框架</title>
<!-- 1. 引入外部的vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2. 准备数据渲染区 {{插值表达式}}-->
<div id="app">
<h2>{{msg}}</h2>
<h1>{{name}}</h1>
</div>
{{msg}} <!-- 不是Vue指定的挂载点的范围,不能解析Vue代码 -->
<!-- 3. 使用Vue准备数据 -->
<script>
// 3.1 创建Vue对象
new Vue({
//element的简称,即将把准备好的数据 渲染 到指定区域--挂载
点
//#app 是利用CSS的id选择器,选中了一个HTML元素
el:"#app",
data: {// 3.2 准备即将要在浏览器展示的数据
msg:'hello vue~',
name:"jack"
}
})
</script>
</body>
</html>
- Vue的语法
- 基础语法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的基础语法</title>
<!-- 1.导入vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.数据渲染区,利用插值表达式获取Vue准备好的数据 {{}}-->
<div id="app">
Vue运算符:
加法:{{3+2}}
减法:{{3-2}}
乘法:{{3*2}}
除法:{{3/2}}
取余:{{3%2}}
三元运算符:{{ 1 > 2 ? 'yes':'no' }}
<!-- 字符串操作: 求长度,拼接,截取 -->
字符串:{{name}}
长度:{{name.length}}
拼接:{{name.concat(666)}}
截取:{{name.substring(2)}}
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
el:"#app",//指定挂载点,把数据展示在指定位置
(利用了css选择器)
data:{ //准备要展示的数据
name:"jack"
}
})
</script>
</body>
</html>
- vue的语法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的基础语法</title>
<!-- 1.导入vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.数据渲染区,利用插值表达式获取Vue准备好的数据 {{}}-->
<div id="app">
调用函数:{{save()}} {{add(1,2)}}
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
el:"#app",//指定挂载点,把数据展示在指定位置
(利用了css选择器)
data:{ //准备要展示的数据
name:"jack"
} ,
methods:{ //添加方法
save:function(){
console.log(100);
},
add:function(a,b){
console.log(a+b);
}
}
})
</script>
</body>
</html>
- vue解析各种形式的data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue解析各种形式的data</title>
<script src="vue.js"></script><!--1. 引入vue.js文件 -->
</head>
<body>
<p id="p1"> <!-- 2.准备了数据渲染区-->
{{name}}
获取对象的属性值:{{person.name}} {{person.age}}
调用对象的函数(必须有小括号的标志):
{{person.eat()}} {{person.sleep(10)}}
<br />
调用数组里的数据:{{arr}}
根据下标获取组里的数据:{{arr[0]}}
{{arr[0].age}}
</p>
<script> <!-- 3.创建Vue对象-->
new Vue({
el:"#p1", //挂载点
data:{//准备数据
name:'jack',
person:{ //data的数据准备一个js对象
name:'rose',
age:20,
eat:function(){
console.log(200);
},
sleep:function(a){
console.log(a);
}
} ,
arr : [ //data的数据准备一个js数组
{
name:"jack",
age:20
} ,
{
name:"rose",
age:30
}
]
}
})
</script>
</body>
</html>
- vue的data里定义函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue的data中写js函数</title>
<!--1. 引入vue.js文件 -->
<script src="vue.js"></script>
</head>
<body>
<!-- 2.准备了数据渲染区-->
<div id="app">
{{msg}}
</div>
<!-- 3.创建Vue对象-->
<script>
new Vue({
el:"#app",//挂载点
// data:function(){//准备展示的数据
data(){//简写
return { //返回JS对象
msg:'hello vue'
}
}
})
</script>
</body>
</html>
- 练习：
- 测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue基础语法</title>
<!-- 引入外部文件的路径问题:
1. 如果你想要的引入的资源,和你在同级目录,直接写 vue.js
2. 如果你想要的引入的资源,和你不在同级目录,
就先写同级的目录再继续写资源名称js/vue.js
-->
<script src="js/vue.js"></script>
</head>
<body>
<div id="d1">
{{msg}}
{{show()}}
{{add(1,2)}}
</div>
<script>
new Vue({
el:"#d1",
data:{
msg:100
},
methods:{
// show:function(){ //标准写法
show(){ //简写
alert(1)
},
// add:function(a,b){ //标准写法
add(a,b){ //简写
alert(a+b)
}
}
})
</script>
</body>
</html>
- vue指令
- 概述
使用方式: 就是在HTML的标签上,加一些v-的指令.
v-model: 实现数据驱动,双向绑定.
v-if: 用来判断,不满足判断条件就不展示
v-show: 用来判断,不满足判断条件就不展示(通过css实现)
v-else-if / v-else : 顺序的要求类似于java
v-cloak : 用来解决闪现问题(网页展示了插值表达式)
v-html: 获取数据,也可以解析HTML标签
2）测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue指令</title>
<!-- 1.引入vue.js -->
<script src="js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app" v-cloak>
{{msg}} <br />
{{msg}} <br />
<!--
2.1. v-model是Vue的指令,实现了双向绑定的功能.把值绑定到指定
属性上
数据驱动,双向绑定: 改Model会影响View,改View会影响Model
-->
<input type="text" v-model="msg" />
<!-- 2.2. v-html指令可以解析数据,并识别HTML代码 -->
<p v-html="msg"></p>
<!-- 2.3. v-cloak指令解决插值表示的闪现问题 -->
<!-- 2.4. v-if指令用来做判断,条件满足才展示,不满足就不展示 -->
<p v-if="person.age>=18">成年人</p>
<!-- 2.5. v-show指令也用来做判断,不满足的话,利用css控制着
style="display: none;" -->
<p v-show="person.age>=18">成年人</p>
<!-- 2.6. v-else指令,组成顺序依次 if...else if...else -->
<p v-if="type === 'A'">优秀</p>
<p v-else-if="type === 'C'">中等</p>
<p v-else-if="type === 'B'">良好</p>
<p v-else>错误</p>
<!-- 2.7. v-for指令用来循环,可以循环数组,类似于JS里的for...in语法,
i表示遍历得到的数据,index是下标
-->
<ol>
<li v-for="i in arr">{{i}}</li>
</ol>
<ul>
<li v-for="i,index in arr">数据是:{{i}} -> 下标是:{{index}}</li>
</ul>
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
el:"#app", //挂载点
data: { //要被渲染的数据
msg : '<h1>hello vue123</h1>',
type: 'C' ,
person:{
age:10
},
arr : ['杨幂','迪乐热巴','Anglelababa']
}
})
</script>
</body>
</html>
- Vue指令 v-on v-bind
- 测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 Vue指令</title>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 渲染区 -->
<div id="app">
<!-- 1. v-on指令用来给HTML元素添加Vue事件,
用:指定事件的触发方式v-on:可以简写成一个@
-->
<button v-on:click="show()">点我1</button>
<button @click="say('hi bro')">点我2</button>
<button v-on:dblclick="say('hi vue')">点我3</button>
<!-- 练习:计数器,点一次按钮就把次数++ -->
<button v-on:click="count++">赞{{count}}</button>
<!-- 2. v-bind指令用来获取变量的值-->
<a href="{{url}}">点我跳转1</a> <!-- 错的 -->
<a v-bind:href="url">点我跳转2</a> <!-- 对的 -->
<a :href="url">点我跳转3</a> <!-- 简写 -->
</div>
<!-- Vue对象 -->
<script>
new Vue({
el:"#app",//挂载点
data:{
count:0 ,//计数器
url:'https://www.baidu.com'
},
methods:{ //存方法
// show:function(){
show(){//函数的简写形式
alert(100);
},
say(a){
alert(a);
}
}
})
</script>
</body>
</html>
- Vue组件
- 概述
当想要扩展HTML的功能时,使用vue定义一些组件.
（1）,全局组件: Vue.component(组件名, 组件的功能)
（2）,局部组件: 在Vue对象里, 再加一个属性components
（3）,使用组件: 在数据渲染区 , 直接把组件名当做HTML的标签名用
区别? 全局组件可以被多个Vue对象使用.局部组件只能在当前Vue对象中使用.
- 测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 组件Component</title>
<!-- 1.导入vue.js -->
<script src="js/vue.js"></script>
</head>
<body>
<!-- 2.数据渲染区 -->
<div id="app">
<!-- 5.使用组件 -->
<Hellocom></Hellocom>
</div>
<div id="d1">
<Hellocom></Hellocom>
<person></person>
</div>
<script>
//4. 创建Vue的全局组件(可以被多个Vue实例使用):类似于扩展了
HTML的标签
//Vue.component(1,2)-1是组件名(最好是全小写)-2是组件的显示效
果
Vue.component('Hellocom',{
template : '<h1>你好 Vue组件</h1>' //组件的显示效果
})
//3. 创建Vue对象
new Vue({
el:'#app'
})
new Vue({
el:'#d1' ,
// 局部组件(只被当前的Vue对象拥有,在指定渲染区可以使用)
components: {
'person':{//组件名
template : '<h1>你好 person组件</h1>' //组件的显示
效果
}
}
})
</script>
</body>
</html>
- Vue项目
- 安装脚手架
node -v #检查nodejs的安装版本
npm config get registry # 查看当前配置的镜像，结果是默认的国外网址
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm install vue-cli -g #安装vue-cli脚手架
vue -V #查看版本
where vue #vue安装在哪里
- 配置项目
vue init webpack jt01 # 慢,等....做了很多选择 # 可能需要执行
才会成功cd jt02 #进入项目目录npm run dev #启动项目
打开浏览器访问网址: http://localhost:8080
- 练习Vue指令
- 测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习Vue指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="seen">now u see me</h1>
<h1 v-show="seen">now u see me</h1>
<ol>
<li v-for="i,a in desc">{{a}} -> {{i}}</li>
</ol>
<a @click="eat()">点我</a>
<br />
<input type="radio" value="w3c" v-model="site"/>w3c
<input type="radio" value="runoob" v-model="site"/>runoob
<p>您选择的是:{{site}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
site:'', //添加获取或修改指令
seen:true ,//添加判断指令
desc:['鸿星尔克','361','贵人鸟','国货之光'] //添加循环指令
},
methods:{
eat(){ //添加事件指令
console.log(100)
}
}
})
</script>
</body>
</html>
- Vue项目的使用
- 概述
src文件夹: 写自己的业务
src/components文件夹: 定义组件
src/router文件夹: 定义路由
src/App.vue文件: 注册组件
src/main.js文件: 入口js文件
index.html: 作为项目的主页
- 自定义组件
新建Car.vue文件（放在src / components文件夹里）
<template> <!-- 1.写 HTML代码 -->
<h1>{{msg}}</h1>
</template>
<script> /* 2.写js代码 */
//可导出的自定义组件
export default{
name : 'Car',
data() { //准备数据
return {
msg:'Hello Vue!!!'
}
}
}
</script>
<style> /* 3.写css代码*/
</style>
- 修改App.vue文件（注册组件）
<template>
<div id="app">
<!-- 4. 使用自定义组件,其实就当做HTML标签用就行了-->
<Car></Car>
</div>
</template>
<script>
//1,导入自定义组件 Car.vue
//Car 是指 Car.vue里面的name属性的值
// ./components/Car.vue 是指 自定义组件的路径(必须以./开始)
import Car from './components/Car.vue'
export default {
name: 'App',
//2,注入组件(类似于局部组件的语法)
components:{
Car //3,使用了第一步的名字
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
- 测试（启动项目）
- 启动项目(在你的workspace里jt01文件夹里执行): npm run dev
- 打开浏览器测试效果
- ElementUI
- 概述
是一套漂亮的网页,有各种元素,直接用现成 代码
Element - The world's most popular Vue UI framework
- 安装
- 进入你的项目目录中( E:\workspace\vue\jt01 )
- 执行安装命令 npm i element-ui -D
- 修改main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'; //导入下载好的elementui
import 'element-ui/lib/theme-chalk/index.css';//导入下载好的elementui css
Vue.use(ElementUI); //使用elementui
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
- 修改Car.vue组件文件
<template> <!-- 1.写 HTML代码 -->
<div> <!-- 组件只能有一个根元素-->
<h1>{{msg}}</h1>
<!-- 开始使用elementui的组件,本质上就是一些标签 -->
<!-- 2.icon图标,,使用i组件,class的值是 图标名称 -->
<i class="el-icon-edit"></i>
<i class="el-icon-s-home"></i>
<i class="el-icon-loading"></i>
<!-- 1.layout布局,默认一行是24个分格 el-row是行 el-col是列-->
<el-row>
<el-col :span="3">品牌</el-col>
<el-col :span="10">价格</el-col>
<el-col :span="11">描述</el-col>
</el-row>
<!-- 3.按钮el-button组件-->
<el-row>
<el-button type="danger" >普通按钮</el-button>
<el-button type="danger" round>普通按钮</el-button> <!-- 圆角-->
<el-button type="danger" circle icon="el-icon-edit"></el-button>
<!-- 圆形带图标-->
</el-row>
<!-- 4.输入框 el-input,添加属性实现输入效果v-model
clearable可清空的输入框
show-password密码隐藏效果 :disabled="true"禁用状态
-->
<el-input placeholder="输入姓名" v-model="msg"
clearable show-password></el-input>
<el-input placeholder="输入姓名" :disabled="true"></el-input>
<!-- 5.表格标签
el-table表示表格,el-table-column表示表格项,label是列名,
:data用来获取arr的数据 ,prop用来获取指定属性的值
-->
<el-table :data="arr">
<el-table-column label="编号" prop="id"></el-table-column>
<el-table-column label="品牌" prop="pinpai"></el-table-column>
<el-table-column label="描述" prop="desc"></el-table-column>
<el-table-column label="价格" prop="price"></el-table-column>
<el-table-column label="更多">
<!-- 圆形按钮 ,icon设置图标 ,type设置颜色 -->
<el-button circle icon="el-icon-edit" type="danger"></el-button>
<el-button circle icon="el-icon-delete" type="danger"></el-button>
</el-table-column>
</el-table>
<!-- 6.表单标签 -->
<el-form>
<el-form-item label="标题: ">
<el-input placeholder="请输入..." v-model="item.name"></el-input>
</el-form-item>
<el-form-item label="卖点: ">
<el-input placeholder="请输入..." v-model="item.sellpoint"></el-input>
</el-form-item>
<el-form-item label="价格: ">
<el-input placeholder="请输入..." v-model="item.price"></el-input>
</el-form-item>
<el-form-item label="详情: ">
<el-input placeholder="请输入..." v-model="item.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="danger" @click="save()">保存</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script> /* 2.写js代码 */
//可导出的自定义组件
export default{
name : 'Car',
data() { //准备数据
return {
msg:'Hello Vue!!!',
arr:[ //为表格准备数据
{
id : 1,
pinpai : '鸿星尔克',
desc : 'to be no.1',
price : 999
},
{
id : 2,
pinpai : '特步',
desc : '飞一样的感觉',
price : 666
}
],
item : { //为表单准备数据
name : '测试标题',
sellpoint : '测试卖点',
price : 99,
desc : '测试详情'
}
}
},
methods:{ //写方法
save(){
alert("保存成功!");
}
}
}
</script>
<style> /* 3.写css代码*/
</style>
- 测试
- 总结
（1）, 安装elementui
（2）, 修改main.js 引入elementui
（3）, 使用了各种组件(标签)
图标 : i 标签, 配置class属性,属性的值是图标的名字
布局: el-row标签表示行元素 el-col标签表示列元素 ,默认是一行有24分栏,:span
属性可以自由组合
按钮: el-button标签表示按钮, type属性用来指定元素颜色,icon属性可以给按钮添
加图标,round circle…
输入框: el-input标签是输入框, 必须指定v-model属性才能实现输入的效果
表格: el-table标签表示表格 , el-table-column表示表格里的列 , 通过:data属性获
取数组里的数据, 通过label属性指定表格里的 表头, 通过prop属性绑定要获取的
值
表单: el-form标签是表单,el-form-item表示表单项, 通过label属性指定表单项的名
字,通过v-model属性获取表单数据
- Maven
- 在IDEA里创建Maven工程
File - New - Project - 输入工程名称和GroupId - Finish
修改pom.xml,添加jar包的坐标，然后刷新下载，pom.xml文件里不飘红就可以了
- pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>cn.tedu</groupId>
<artifactId>cgb2107maven</artifactId>
<version>1.0-SNAPSHOT</version>
<!-- pom.xml是maven工程的核心文件 , 不许飘红
里面放了jar包的坐标 groupId artifactId version
-->
<dependencies>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.48</version>
</dependency>
</dependencies>
</project>
1684
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
