Vue基础学习笔记
Vue
IDEA：插件 VUE
vue指令
- v-if
- v-else
- v-else-if
<div id="app"> <span v-if="type==='A'">A</span> <span v-else-if="type==='B'">B</span> <span v-else-if="type==='C'">C</span> <span v-else>no</span> </div> - v-for
<li v-for="(item,index) in items"> {{item.message}}--{{index}} </li> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script> <script> var vm = new Vue({ //Model：数据 el : "#app", data : { items : [ {message : "fanxu"}, {message : "muyu"} ] } }); </script> - v-on
七个常用属性
<script>
var vm = new Vue({
el:"",
data:{
message:"hello vue"
},
methods:{//方案必须定义在vue的Method的对象中
sayHi:function(){
alert(this.message);
}
}
})
</script>
- el
- data
- template
- method
- render
- computed
- watch
v-model双向绑定
<div id="app">
<input type="text" value="" v-model="message"/> {{message}}
<!--<textarea v-model="message" cols="30" rows="30">输入的文本：</textarea><br>-->
<br><br>
<input type="radio" name="sex" value="男" v-model="param1"> 男
<input type="radio" name="sex" value="女" v-model="param1"> 女
<br>
选中了：{{param1}}<br><br>
<select v-model="param2">
<option value="" disabled>--请选择--</option>
<option>音乐</option>
<option>文学</option>
<option>工具</option>
<option>科幻</option>
<option>名著</option>
</select><br>
选择了：{{ param2}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"1",
param1:"",
param2:""
}
});
</script>
用v-model绑定一个data里的值，然后再在其他地方调用这个指
就可以做出一边的值改变，多处位置的文本同时改变的效果
网络通信：Axios
什么是Axios？
Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。
既然是发get、post请求，那为什么不用jQuery.ajax呢？
这是因为使用jQuery会大量的操作DOM，这样会导致前端页面变得迟缓，所以使用了Axios这种轻量级的处理方式。
例子
先导入vue的依赖和axios的依赖
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
style
<style>
[v-clock]{
display: none;
}
</style>
html页面
<!--v-clock可以解决html页面闪烁的问题-->
<div id="app" v-clock>
{{info.name}} <br>
{{info.address.street}}<br>
<a v-bind:href="info.url">{{info.name}}</a>
</div>
javascript
<script>
var vm = new Vue({
el: "#app",
//data return这种写法可以接受axios的返回值，与之前使用data不同。
data(){
return{
//这里要注意，需要调用的属性写在这里就可以，不需要的可以不写，注意一定不要写错字段的名字。否则会接收不到值
info:{
name: null,
url: null,
page: null,
address: {
street: null,
city: null,
country: null
}
}
}
},
//这里写axios方法，mounted是vue的钩子函数
mounted(){
axios.get("data.json").then(response=>( this.info=response.data));
}
})
</script>
json数据
{
"name": "百度",
"url": "http://www.baidu.com",
"page": 88,
"isNonProfit": true,
"address": {
"street": "鲁谷街道.",
"city": "北京",
"country": "中国"
}
}
计算属性
计算出来的结果，保存在属性中，内存中运行：虚拟Dom
可以把它想象成缓存
computed与methods的区别
- methods中的方法，在通过vm调用之后，是会重新执行一遍的
- comupted中的方法，比较类似于缓存，如果方法里的内容没有变化，那么即使通过vm调用了这个方法，也不会重新执行一遍，而是会调用之前执行好的内容。、
所以，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销，前端节省的资源对于并发来说很是重要
什么是计算属性：
计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算
的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的
属性（将行为转化成了静态的属性），仅此而己;可以想象为缓存！
html
<div id="app">
<!--methods通过方法来调-->
<p>currentTime1:{{currentTime1()}}</p>
<!--computed通过属性来调-->
<p>currentTime2:{{currentTime2}}</p>
</div>0
javascript
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
message: "hello world"
},
//每次调用的时候都会重新计算
methods: {
currentTime1: function(){
return Date.now();//返回一个时间戳
}
},
//computed计算完这个方法之后，会将值存入内存中，除非方法里的值变了，否则一直不会刷新
//可以将computed想象成缓存，用于节约系统的开销
computed: {
currentTime2: function(){
return Date.now();//返回一个时间戳
}
}
})
</script>
Vue组件：Vue.Component
<div id="app">
<l v-for="item in items" v-bind:a="item"></l>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
Vue.component("l",{
props:['a'],
template:"<li>{{a}}</li>"
});
var vm = new Vue({
el:"#app",
data:{
items:['java','linux','前端']
}
});
</script>
首先data中的items里存放了一个数组
然后放到上边已经绑定好的l组件中
l组件需要遍历数组中的多个值
用v-for实现，但是因为是组件显示
所以一般的传值方式传不进去
用v-bind:a="item"绑定参数
然后在Vue.component中的props:[‘a’]放已经绑定好的变量
slot 插槽
类似于模板，可以通过插槽动态的生成一种模板化的dom，多个组件通过slot互相关联
<div id="app">
<todo>
<!--:title=等价于 v-bind:title; slot="todo-title" 与下方的两个component进行了绑定-->
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
//先定义一个大的模板
Vue.component("todo",{
template:'<div>'+
'<slot name="todo-title"></slot>'+//通过name属性，和下边定义的component绑定起来
'<ul>' +
'<slot name="todo-items"></slot>'+
'</ul>'+
'</div>'
});
//详细的定义了一个标签
Vue.component("todo-title",{
//绑定的属性名
props:['title'],
template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item'],
template:'<li>{{item}} </li>'
});
var vm = new Vue({
el:"#app",
data: {
title:"范栩",
todoItems:['fanxu','muyu','yu']
}
});
</script>
自定义事件分发
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" :index="index" @remove="removeItems(index)" :key="index"></todo-items>
</todo>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script>
Vue.component("todo",{
template:'<div>'+
'<slot name="todo-title"></slot>'+
'<ul>' +
'<slot name="todo-items"></slot>'+
'</ul>'+
'</div>'
});
Vue.component("todo-title",{
props:['title'],
template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
props:['item','index'],
template:'<li>{{index}}--{{item}} <button @click="remove">删除</button></li>',
methods:{
remove:function(index){
this.$emit("remove",index)
}
}
});
var vm = new Vue({
el:"#app",
data: {
title:"范栩",
todoItems:['fanxu','muyu','yu']
},
methods:{
removeItems:function(index){
this.todoItems.splice(index,1);
}
}
});
主要知识点:this.$emit()，这个方法可以调用父级的方法，然后，通过前端自定义方法调用vm中的methods，达到双向绑定的效果
@等价于v-on:
创建工程
# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装element-ui -S
npm i element-ui -S
# 安装依赖
npm install
# 安装SASS加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev
npm命令解释
-
npm install moduleName：安装模块到项目目录下 -
npm install -g moduleName：-g的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看npm config prefix的位置 -
npm install -save moduleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写 -
npm intall -save-dev modulename：–save-dev的意思是将该模块安装到项目目录下，并在package文件的devDependencies节点写入依赖，-D为该命令的缩写。
路由嵌套
export default new Router({
routes:[
{
path:'/main',
component:Main
},{
path:'/login'
component:Login,
children:[
{path:'/user/profile',component:UserProfile},
{path:'/user/list',component:UserList}
]
}
]
})l
使用chirldren就可以进行路由的嵌套
传参和重定向
<!--//传参-->
<router-link :to="{name:'/user/profile',params:{id:1}}"></router-link>
<!--//接参-->
routes:[
{path:'/user/profile:id',component:UserProfile}
]
<!--//html取值-->
{{$route.params.id}}
<!--//!!注意，所有元素不能直接暴露在根节点中，需要有标签包裹-->
<!--props解耦-->
routes:[
{path:'/user/profile:id',component:UserProfile,props:true}
]
//props html
{{id}}
<!--重定向-->
{
path:'/goHome',
redirect:'/main'
}
钩子和404页面
路由模式有两种
- hash：路径带#符号，如http://localhost:/#/login
- history：路径不带#符号，如http://localhost/login
export default new Router({
mode:'history',
routes:[]
})
404
先创建了一个NotFound.vue 并且import了这个NotFound
{
path:'*',
component:NootFound
}
钩子
过滤器
beforeRouteEnter:(to,from,next)=>{
console.log("进入路由之前");
next();
},
beforeRouteLeave:(to,from,next)=>{
console.log("进入路由之后");
next();
}
参数说明：
- to:路由将要跳转的路径信息
- from:路径跳转前的路径信息
- next:路由的控制参数
- next()跳入下一个页面
- next(‘path’)改变路由的跳转方向，使其跳到另一个路由
- next(false)返回原来的页面
- next((vm=>{}))仅在beforeRouterEnter中可用，vm是组件案例
cnpm有可能安装失败，尽量使用npm
458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
