文章目录
Vue
–1,概述
基于JavaScript的渐进式前端框架
基于JavaScript : 本质上就是封装了js代码, 提供vue.js文件
渐进式 : vue框架的功能很丰富的, 自己选择用哪些功能.
前端框架 : 只是提供了一套完善的功能,指定软件的流程
特点:
轻量级 + MVVM思想 + 数据驱动/双向绑定 + 组件化
- 一个轻量级的mvvm框架，双向绑定，数据动态更新，gzip后大小只有20k+
- 是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发
- 原生html页面是通过js 操作的是dom，而vue.js操作的是数据。
- 和传统前端开发开发的关注点完全不同，传统方式关注的是都像的document结构的api，而vue关注的是数据。
- 优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api。
渐进式框架
Vue是一个用于构建用户界面的渐进式 SPA （ Single-Page Applications ）**单一页面框架。与其它庞大而单一框架不同的是，Vue从一开始就被设计为按需搭建。
- 可以只使用核心vue.js
- 可以只使用核心vue.js + components组件
- 可以只使用核心vue.js + components组件 + router路由
- 可以只使用核心vue.js + components组件 + router路由 + vuex状态管理
- 构建大型vue项目：npm（包依赖） + webpack（打包、压缩、合并等）
MVVM框架
MVVM框架体系特点
- 引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。
- 页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码
–2,入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue入门案例</title>
<!--
1.引入vue.js文件,src指定js文件的位置(先找到和自己同级的资源)
-->
<script src="vue/vue.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区:是指在指定位置展示vue提供的数据
{{ }} 插值表达式,{{msg}}获取vue提供的msg的值
-->
<div id="app"> {{msg}} </div>
<!-- 3.创建Vue对象,使用vue准备数据,让第二步获取数据 -->
<script>
var a = { //js对象
msg:'hello vue~~~'
}
new Vue({
el:"#app" ,
data: a
})
</script>
</body>
</html>
Vue的运算符
–1,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的运算符</title>
<!-- 1.引入vue.js -->
<script src="vue/vue.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app">
加法:{{2+3}}
减法:{{2-3}}
乘法:{{2*3}}
除法:{{3/2}}
三元运算符:{{age > 18 ? '成年人' : '未成年' }}
</div>
<!-- 3.创建Vue对象 -->
<script>
new Vue({
el:"#app", //挂载点,指定数据要在哪儿展示
data:{
age:20
}
})
</script>
</body>
</html>
Vue的语法
–1,定义函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue的基础语法</title>
<!-- 引入vue.js + 准备渲染区 + 创建Vue对象 -->
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
vue对字符串的操作:<br />
字符串: {{str}}
字符串长度:{{str.length}}
字符串的拼接:{{str.concat('vue')}}
<br />
调用vue的函数:{{show()}} {{sout(1000)}}
</div>
<script>
// function a(){}
// var a = function(){}
let vm = new Vue({
el:"#app" , //挂载点
data:{ //给渲染区准备数据
str:'hello'
} ,
methods:{//1,创建vue的方法/函数
//函数名:函数定义
show:function(){
console.log("show()调用成功")
} ,
sout:function(x){//定义时有参数,调用时也需要传入参数
console.log('sout()调用成功'+x)
}
}
})
</script>
</body>
</html>
–2,定义复杂数据并解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue解析复杂格式的数据</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div class="a">
<h1>vue解析普通的数据: {{str}}</h1>
<h1>vue解析js对象的属性(对象名.属性名):{{car.name}} {{car.price}} </h1>
<h1>vue解析js对象的方法:{{car.run()}} {{car.tostring()}}</h1>
<h1>vue解析js数组的属性:{{arr[0].firstname}} {{arr[1].firstname}}</h1>
</div>
<script>
// var car = {name:"BMW",price:9.9};
new Vue({
el:".a" ,//挂载点
data:{ //即将要展示的数据
str:'hello vue', //属性
car:{ //创建对象
name:"BMW", //对象的属性
price:9.9 , //对象的属性
// run:function(){//对象的方法
run(){//对象的方法
console.log("run()调用成功")
} ,
// tostring:function(){
tostring(){
console.log(this.name+","+this.price)
}
},
arr:[//创建数组
{
firstname:"王",
lastname:"五"
},
{
firstname:"张",
lastname:"三"
}
]
}
})
</script>
</body>
</html>
–3,data的三种写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 data里数据的三种写法</title>
<!-- 1.引入vue.js文件 -->
<script src="vue/vue.js"></script>
</head>
<body>
<!-- 2.数据渲染区 -->
<div id="app">
{{msg}}
</div>
<script>
// 3.创建Vue对象
let vm = new Vue({
el:"#app" ,// 挂载点
// data:{
// msg:'vue'
// }
//data:function(){//方便的把组件间的关系实现松耦合,提高代码的复用性
data(){//同上,只是简写形式
return {
msg:'vue'
}
}
})
</script>
</body>
</html>
Vue指令
–1,概述
是vue框架提供的,方便的展示网页元素语法.标识v-前缀.
使用: 引入vue.js + 在标签中添加特殊的属性v-*
常见指令: v-if v-for v-bind v-…
–2,测试v-model v-cloak v-if v-show v-for 指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue/vue.js"></script>
<style>
/* 选择器{属性名:属性值;} */
[v-cloak]{
display: none;/* 隐藏的属性 */
}
</style>
</head>
<body>
<div id="app" v-cloak>
{{addr}}
<!--
1.v-model:实现了双向绑定,把数据和addr属性绑定,
v-model可以获取addr的值也可以设置addr的值
-->
<input type="text" v-model="addr"/>
<h1>你好:{{nick}}</h1>
<input type="text" v-model="nick"/>
<!-- 2.闪现v-cloak:当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染,在浏览器上展示了插值表达式
添加v-cloak属性,使用css隐藏插值表达式
-->
<!-- 3.判断元素是否展示v-if:判断条件为true才展示 -->
<p v-if="person.age > 18">成年人</p>
<p v-show="person.age > 18">成年人</p>
<!-- 总结:v-if和v-show指令的区别?都可以判断,但是,
不满足判断条件时,前者不会解析这个元素,
后者元素会被解析只是使用css隐藏起来了<p style="display: none;">成年人</p>
-->
<!-- 4.判断<10儿童,>18成年人,>60青年 -->
<p v-if="person.age<10">儿童</p>
<p v-else-if="person.age>18">成年人</p>
<p v-else>青年</p>
<ol>
<!-- 5.循环指令v-for:准备数组数据 + v-for指令遍历数组
i是数据,a是下标,in是for..in的固定语法,hobby是数组的名字
{{i}}是插值表达式获取i的值,{{a}}是插值表达式获取a的值
-->
<li v-for="i in hobby"> {{i}} </li>
<li v-for="i,a in hobby"> 数据--{{i}},下标--{{a}}</li>
</ol>
</div>
<script>
new Vue({
el:'#app',//挂载点
data:{
addr:'广州',
nick:'tom',
person:{//js对象
age:15
},
hobby:['吃鸡','王者','敲代码','吹牛皮']
}
})
</script>
</body>
</html>
–3,测试 v-on v-bind指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="fun()">单击按钮</button>
<!-- 6.v-on给元素添加事件:dblclick双击事件,click单击事件 -->
<button v-on:dblclick="fun()">双击按钮</button>
<!-- 练习:用vue做一个点赞的按钮
QQ:2250432165
-->
<!-- v-bind: 把后面出现的数据当变量使用,会解析变量的值-->
<a href="http://act.codeboy.com">java培优</a>
<a v-bind:href="url" target="_blank">{{urlname}}</a>
<a :href="url" target="_blank">{{urlname}}</a>
</div>
<script>
new Vue({
el:"#app", //挂载点
data:{
name: "tony",
url: "http://act.codeboy.com",
urlname: "达内java培优"
},
methods:{ //创建函数
fun(){
console.log(1);
}
}
})
</script>
</body>
</html>
Vue练习
–1,vue解析数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue解析数据</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{str}}</h1>
<h1>{{person.name}} {{person.age}} {{person.coding()}}</h1>
<h1>{{users[1].address}} {{users[0].age}}</h1>
<h1>{{show()}}</h1>
</div>
<script>
new Vue({
el:"#app",//id选择器
data(){
return{
str:'vue',
person:{ //对象
name:'jack',
age:20,
coding(){ //简写的函数
alert(this.name+this.age)
}
},
users:[ //数组
{
name:'tony',
age:10,
address:'西安'
},
{
name:'jerry',
age:20,
address:'广州'
}
]
}
} ,
methods:{
show(){
alert('show()调用成功!');
}
}
})
</script>
</body>
</html>
–2,Vue指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue指令</title>
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="fun()">单击按钮</button>
<!-- 6.v-on给元素添加事件:dblclick双击事件,click单击事件 -->
<button v-on:dblclick="fun()">双击按钮</button>
<!-- 练习:用vue做一个点赞的按钮
QQ:2250432165
-->
<button v-on:click="count++">点赞{{count}}</button>
<!-- 7.v-bind: 把后面出现的数据当变量使用,会解析变量的值-->
<a href="https://www.baidu.com/">点我,百度一下</a>
<!-- 问题:把url当字符串了,而不是当变量用的 -->
<a href="{{url}}">点我,百度一下</a>
<a v-bind:href="url" target="_blank">点我,百度一下</a>
</div>
<script>
new Vue({
el:"#app", //挂载点
data:{ //准备数据
count:0, //点赞数
url:'https://www.baidu.com'
},
methods:{ //创建函数
fun(){
console.log(1);
}
}
})
</script>
</body>
</html>
Vue组件
–1,概述
扩展了HTML的元素,好处是: 提高了组件代码的复用性
使用步骤: 1,创建组件 2,使用组件(当做HTML标签)
1,分类: 全局组件 和 局部组件 : 作用域
全局组件语法: Vue.component(1,2)–1是标签名/组件名2是配置选项
局部组件语法:给Vue对象添加components属性
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue组件</title>
<!-- vue组件:扩展了HTML元素(提高了组件代码的复用性),
使用步骤:1,定义组件 2,使用组件
1,定义组件分为:全局组件和局部组件
2,两种组件的区别??
全局组件:可以在所有的数据渲染区使用,而且是先定义再new Vue()
局部组件:是在Vue对象里使用components来定义的,只能在当前对象的数据渲染区来使用
-->
<script src="vue/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 2,使用全局组件(本质上就是一个HTML元素) -->
<car></car>
<!-- 4,使用局部组件(本质上就是一个HTML元素) -->
<person></person>
</div>
<div id="d">
id=d位置,使用的全局组件:<car></car> ,使用成功!
id=d位置,使用的局部组件:<person></person> ,使用失败!
</div>
<script>
//1,创建全局组件
//给vue添加组件(组件名称,组件的模板)
Vue.component('car',{
// 通过template,描述car组件的功能
template:'<h3>hello Component</h3>'
})
//创建Vue对象,拥有了car组件
new Vue({
el:"#app",
components:{//3,创建局部组件
// 组件名称,组件模板
'person': {
template:'<h1>局部组件</h1>'
}
}
})
new Vue({
el:"#d"
})
</script>
</body>
</html>
Axios技术
–1,概述
是Vue提供的Ajax技术,和JS实现的Ajax不同,Vue提供了更简单语法,封装了js代码
Ajax技术是实现了网页的局部刷新,异步访问的功能.好处是: 避免了刷新整个网页,而只刷新局部
1,语法:
axios.get(访问资源的url).then( a => { 处理a的方式,a代表了服务器给浏览器返回来的数据 } )
let url1 = "http://localhost:8090/findAll"
axios.get(url1).then(function(promise){console.log(promise)/* 获取服务器返回值数据 */})
解决轮回地狱问题
const {data: result} = await this.$http.post('/item/updateItem', this.updateItemForm)
2,使用步骤: 引入vue.js + 引入axios.js
–2,测试
项目结构
网页代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习 vue的axios</title>
<script src="vue/vue.js"></script>
<script src="vue/axios.min.js"></script>
</head>
<body>
<div id="app">
<!-- 需求:点击按钮,去1.json里获取city的数据并展示 -->
<button @click="show()">点我,展示数据</button>
<select>
<option v-for="i in city">{{i}}</option>
</select>
</div>
<script>
new Vue({
el:"#app",
data:{
city:''
},
methods:{
show(){
//去1.json里获取city的数据
axios.get('1.json').then(
a => {
this.city=a.data.city;
}
)
}
}
})
</script>
</body>
</html>
1.json文件代码
{
"name":"jack",
"city":["北京","上海","深圳"]
}
总结
Ajax "回调地狱"问题
回调地狱说明
缺点: 嵌套层级太深,不便于维护.
分析: 将ajax的2层方法,想办法封装到一层中.
解决回调地狱-async-await
/**
* 1.定义一个方法
* 关键字:
* 1. async 标识函数
* 2. await
*/
async function saveUser(){
let user2 = {name: "axios",age: 18, sex: "男"}
let promise = await axios.post("/axios/saveUser",user2)
console.log(promise.data)
}
//2.调用方法
saveUser()
简化promise对象写法
/**
* 1.定义一个方法
* 关键字:
* 1. async 标识函数
* 2. await 标识ajax请求
*/
async function saveUser(){
let user2 = {name: "axios",age: 18, sex: "男"}
//let {conf: confv,data: datav,status: statusv} = await axios.post("/axios/saveUser",user2)
let {data: result} = await axios.post("/axios/saveUser",user2)
console.log(result)
}
Vue路由
–1,概述
接受浏览器的请求,根据不同的请求的方式,找到匹配的组件
工具类:
1,VueRouter表示Vue的路由对象.
2,routes属性是VueRouter的核心属性,用来把不同的请求匹配的不同的组件
使用步骤:
1, 引入vue.js 2, 引入vue-router.js
–2,测试
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 vue路由</title>
<!-- 1.引入js文件 -->
<script src="vue/vue.js"></script>
<script src="vue/vue-router.js"></script>
</head>
<body>
<!-- 2.准备数据渲染区 -->
<div id="app">
<!-- 3.4.使用路由 ,router-link被HTML翻译成了a标签,to翻译成href属性-->
<router-link to="/home">1</router-link>
<router-link to="/help">2</router-link>
<!-- 3.5.展示匹配成功的组件,路由的出口 -->
<router-view></router-view>
</div>
<!-- 3.准备路由功能 -->
<script>
//3.3. 创建组件
let home = {
template:"<h1>我是主页~~</h1>"
}
let help = {
template:"<h1>我是帮助页~~</h1>"
}
//3.2.创建路由对象VueRouter,通过routes属性指定请求和组件的匹配关系
let router = new VueRouter({
routes:[
//path请求路径,component匹配到的组件
{path:'/home',component:home},
{path:'/help',component:help}
]
})
//3.1.通过router属性指定路由功能
new Vue({
el:"#app",
//router:router
router //key和value一样的话就可以直接简写
})
</script>
</body>
</html>
扫一扫
1458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
