12.v-else-if
Vue
- vue是一个渐进式的js框架，只注重图层，结合了html+css+js，非常的易用，并且有很好的生态系统。而且vue体积很小，速度很快，优化很到位。
- ssm的整合，搞定了后端一套：增删改查。
2.MVVM
-
vue技术是mvvm开发模式的实现者
MVC: model view controller
MVVM: model view viewmodel：连接视图和数据的中间件。
-
VM的实现：
- 视图变了，通知数据进行变化
- 数据变了，通知视图发生变化
- ----MVVM通过VM实现了双向数据绑定。
3.cdn内容
这是一种快速策略，能够从离自己最近的服务器上快速获得外部的资源。
4.vue的快速起步
-
两个部分
- html：<div id="app"></div>
- 需要一个vue对象实例。
5.差值表达式
-
html中被绑定元素中的，获取vue对象的属性和方法
-
！！！差值表达式不能写在html的标签中，不能作为属性的值的部分。 解决方法是用v-bind进行属性绑定，v-bind:href="link" === :href="link"
6.Vue的关键字
-
v-model：是vue和data属性值进行绑定
-
<input type="text" v-model="value"/> new App({ data(){ return { value:'请输入' } } }) -
.v-on:click=“”同过配合具体事件名，来绑定vue中的函数
- 在响应函数里，用event内置对象，对象表示当前事件，通过event.target.value来获得当前事件对象value的值。
- this的用法：this指向的vue对象。通过this调用当前vue的属性和方法
- v-on:click="" === @click=""
- v-once，表示数据只改变一次
- v-html="”，将vie中的属性的值作为html元素来使用，v-text会将vue中的属性只作为纯文本使用
7.事件修饰符
- event.preventDefault()
- event.stopPropagation()
- .stop,.prevent,.capture,.self,.once,.passive
8.computed计算属性
- methods每次调用都执行一遍，而computed是能够将计算结果缓存起来的属性（将行为转化为静态的属性），提高效率。
- 在调用computed里存放的函数时，不能加（）
- !!!因为computed返回的是缓存的属性
<div>{{change}}</div>
computed:{
change(){
return value=""
//computed可以返回一个对象，放着多个键值对
return {red:this.temp,mywidth: this.temp}
}
}9.watch监控属性
- watch给属性绑定函数，当属性改变时，该函数主动调用，调用时可以接收两个参数，第一 个参数是属性改变后的值，第二个参数是属性改变前的值
10.Vue改变样式
- <div :class="{red:temp}"/>,data中定义temp是true时 >>> class为red
- class绑定多个样式（:class="[mydiv,red]"），用数组
- 内联样式 :style=“[myStyle, {height:myHeight+'px'}]
!!!面试题
11.Vue的核心：虚拟DOM和diff算法
12.v-else-if
<div id = "app">
<div v-if=" temp">看到我了</div>
<div v-else-if=" temp">前方高能</div>
<div v-else=" temp">看到他了</div>
<button type="button" @click="temp = !temp">点我</button>
</div>13.v-show！！！面试题
14.v-for
- 改进版：for语句中，key建议加上，作为标识，i是下标
-
v-for=“（v,k，i）in student”{{i}}{{k}}{{v}} <ul> <li v-for=""(str,i) in args" :key="i"> {{str}}{{i}} </li> </ul> - 遍历一个对象数组:用嵌套（渲染列表）
<tr v-for="(user,i) in users" :key="i"> <td>{{i + 1}}</td> <td v-for="value in user">{{value}}</td> </tr> new Vue({ el:'#app', data:{ users:[ { name:'小明'， age:20, tel:'1888888888' }, { name:'小❀'， age:21, tel:'18824323423' } ] } })<div id="app"> {{title}} <button type="button" @click="toUpCase">点我</button> {{toLowerCase}} </div> new Vue({ el:'#app', data:{ title:"Hello Vue" }, methods:{ toUpCase:function(){ this.title = this.title.UpperCase(); } }, computed:{ toLowerCase:function(){ return this.title.toLowerCase(); } } })Vue进阶
1.vue对象之间的操作
-
通过一个vue对象操作另一个vue对象
-
<div id="app"> {{title}} <button type="button" @click="changeOtherVueTitle">点我</button> {{toLowerCase}} </div> var v1 = new Vue({ el:'#app', data:{ title:"Hello Vue" }, methods:{ toUpCase:function(){ this.title = this.title.UpperCase(); } }, computed:{ toLowerCase:function(){ return this.title.toLowerCase(); } } }) var v2 = new Vue({ el:'#app2', methods:{ changeOtherVueTitle:function(){ v1.title="hello java" } } }) -
vue对象操作另一个vue对象的内容，维度有两个，操作属性、操作方法
- 这些属性是data和computed里面定义的
- vue的实例属性：data和computed
-
vue的对象实例：
- 直接通过对象.的方式调用的属性，来自data和computed中的属性，但是vue对象中el和data等也称为属性。
v1.$data.title = v1.title - 实例属性ref：替代id（原因：相同的id不会报错）：快速通过调用ref获得页面中的某个元素。
<button ref="mybtn1" @click="">点我</button> this.$refs.mybtn1.innerHTML = "hello" - 动态绑定vue实例到页面中，mount加载的意思:实现页面元素和vue动态绑定，之前通过el
-
<div id="#app3"></div> <script> var v3 = new Vue({ template: "<h1>hello</h1>" }) v3.$mount("#app3") </script>
2.vue组件的使用
-
注册组件：component
实现组件化，需要在页面中注册组件，分别是全局注册和本地注册。
- template里有且只有一个根元素
<model></model>
Vue.component("model",{
template: "<button @click>hello</button >",
methods:{
}
})//vue对象-
区别：
- data的定义：vue实例中data：{}，组件中data：function（）{return{}}
-
vue组件的本地（局部注册）
-
new Vue({ el:"#app", components:{ "model1":{}//只有id是app的div才可以使用 } })3.vue的生命周期
- 不能用箭头函数定义一个生命周期方法
- 初始化，创建，绑定，更新，销毁等阶段
4.vue结合bootstrap搭建首页
- 引入cdn搭建vue.js文件<script>
- 引入bootstrap.js文件
vue-cli和node.js
-
我们后端使用maven创建项目，一是通过maven的依赖机制，能够快速的管理依赖。二是通过maven确定项目的结构，所谓项目的结构就是项目里有哪些文件和文件夹。
-
node.js来安装vue-cli脚手架：
- node -v
- npm install vue-cli -g
- vue list //骨架名
- vue init 骨架名 项目名
- npm install //安装依赖
- npm run dev
webpack-simple项目结构：
- index.html:无论前端页面内容多复杂，index.html都只有11行，实际内容已经被打包（/dist/build.js）
- app.vue
- 在idea支持Vue插件
Vue的三大组成
- template，script，style
- 在App.vue使用另一个vue组件
全局注册：
- 在main.js中，通过import和Vue.component配合，来将一个.vue文件注册成为一个标签，可以在全局使用。
本地注册：
- 在vue中，通过import和Vue.component配合，来将一个.vue文件注册成为一个标签，可以在全局使用。
组件参数传递
参数传递：data，computed，props
-
父传子
props['MyProp1','MyProp2']
props:{
myName:{
type: String,
required: true,
default:'xx' //不传值就有默认值
}
}父亲
<my-content :mytitle="msg"></my-content>
data(){
return{msg:"hello vue!!!"}
}
儿子
{{mytitle}}
props:['mytitle']-
改进版传递参数
子,使用this.$emit("键","值")
doClick:function(){
this.$emit('newName','xiaoliu')
}
父， @键="msg=$event"，msg是父组件中vue的属性。
<sub-app :myName="name" @newName="name=$event"></sub-app>http请求--Axios
-
Axios：开源的可以在浏览器和node.js异步通信框架，主要实现ajax异步通信（不支持ajax通信功能）
-
过程：
- 安装axios
- 在main.js引入
- 发送ajax请求
//get请求
@click="request"
request:function(){
this.axios({
method:'get',
url:'http://localhost:8090/register?mail='+this.mail+'&password='+this.password,
data:{}
}).then(function(response){
console.log(response.data)
})
}解决跨域问题：
-
跨域问题：浏览器不能执行其他网站的脚本。
-
解决：
1.使用CORS解决跨域问题，允许浏览器发送XMLHttpRequest请求，需要浏览器和服务器都支持，目前所有浏览器都支持。只要服务器实现了CORS接口，就可以在跨源通信中设置（"Acces-Control-Allow-Origin"，“*”）
2.JSONp
路由问题：
-
连接两个交换机（两个不同局域网的通信）
- 安装路由模块：npm install vue-router -s
- 创建components文件夹，分别创建user、home组件
- 引入路由模块main.js
import VueRouter from 'vue-router'//引入路由模块
import {routes} from './routes' //引入静态路由表
Vue.use(VueRouter);
const router = new VueRouter({
routes:routes
});
new Vue({
el:"#app",
router, //router放在实例当中
render:h=>h(App)
})- 创建静态路由表routes.js
import Home from '@/components/Home' import user from '@/components/Products' export const routes = [//暴露一个路由 { path:'/Home', components:Home },{ path:'/Products', components:Products } ] - 应用:导航栏的切换
<div> <span> <router-link to="/Home">首页</router-link> </span> <span> <router-link to="/Products">商品列表</router-link> </span> </div> <router-view></router-view>//显示路由表里组件的内容
参数的传递
1.路由传参
- header.vue传递参数
<router-link to="/Home/10">首页</router-link>
- 路由表routes.js
export const routes = [//暴露一个路由 { path:'/Home/:id', components:Home },
- home.vue接收参数:通过$route.params.id
<p>{{id}}</p>
data(){
return {
id:this.$route.params.id
products:[]
}
}
created:{
console.log(this.id)
//发送axios，请求后端接口，获得所有手机的商品列表，填充到this.products
}2.传递复杂的参数
<router-link to="{name:'Product',params:{id:1001}}">首页</router-link>路由之间跳转的方式
- 通过html中的路由<li role="presenration>"<router-link to="路由地址">首页</router-link></li>
- 通过js跳转
- 绑定事件
- this.$router.push("/Phone/Products/1")
关于静态资源打包：
- vue-cli
- 安装依赖
- npm run dev，实时效果是由vue-cli进行打包给node.js上的
- 开发完成以后，资源需要我们手动部署在自己的服务器上，使用npm run build构建资源 >>> 生成dist文件夹（打包了所有资源）
- 手动把图片放在dist文件夹，修改好vue中的图片路径，
Mock假数据
- 假数据，让前端不需要等待后端的接口，而直接进行下一步的开发，常用工具easy Mock 在发送axiios请求的时候，如何调用当前vue对象的内容
（因为axios内部then内的this是当前的axios对象，而不是vue，因此把当前vue对象用vm来指明。）
created(){
var vm = this;
this.axios({
method:'get',
url:'http://localhost:8090/register?mail='+this.mail+'&password='+this.password,
data:{}
}).then(function(response){
console.log(response.data)
})
}
}嵌套路由（子路由）
- 在路由显示的组件内部，又嵌套着路由，成为子路由。在router中配置
export default new Router = ({
,{
path:'/Home',
name:'Home'
components:Home,
children:[
{
path:'/productList',
name:'productList',
component:productList,
}
]
}
})-
路由的重定向
- 直接调用另一个配置好的路由对象即可。
routes = [//暴露一个路由
{
path:'/Home',
component:Home
},
{
path:'/Logout',
redirect:/Home
}
]路由的钩子函数
- beforeRouteEnter，在进入路由前执行
- beforeRouteLeave，在离开路由前执行
-
beforeRouteEnter:(to,from,next) => { console.log("准备进入"); next( console.log("进入目标之后调用的函数")); } beforeRouteLeave:(to,from,next) => { console.log("准备离开"); next(); }
加油！！！
本人是新手，如有错误请留言更正，谢谢各位小老师❀❀❀❀❀❀
1263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
