vue补充
一.安装vue-cli脚手架
1.淘宝镜像下载
用淘宝的国内服务器来向国外的服务器请求,我们向淘宝请求,而不是由我们直接向国外的服务器请求,会大大提升请求速度,使用时,将所有的npm命令换成cnpm即可
2.vue-cli的下载
安装文档:https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4
二.过滤器
1.局部过滤器:在当前组件内使用
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script>
let App={
data(){return{data:"hello"}},
//使用语法
template:`<div>我是一个app {{ data | reverse }}</div>`,
//创建语法
filters:{
reverse:function(val){
return val.split('').reverse().join("")
}
}
} new Vue({
el:"#app",
data(){
return{}
},
template:`<div class="vue"><App></App></div>`,
components:{
App
}
})
</script>
</body>
2.全局过滤器:任何组件都能使用
<body>
<div id="app"></div>
<script src="vue.js"></script>
<script src="day03/moment.js"></script>
<script>
//创建语法
Vue.filter("showTime",function(val,style,a){
return moment(val).format(style)
})
new Vue({
el:"#app",
data(){
return{time:new Date()}
},
//使用语法
template:`<div>现在的时间是:{{ time | showTime("YYYY-MM-DD",1) }}</div>`,
})
</script>
</body>
注:参数的个数没有限制
3.moment.js
JavaScript 日期处理类库
使用文档:http://momentjs.cn/
三.生命周期的钩子函数
<body>
<div id="app"></div> <script src="vue.js"></script>
<script>
let Test={
data(){
return {msg:"shy"}
},
template:`<div id="change">我叫{{ msg }}<button @click="change">更新</button></div>`,
methods:{
change(){
this.msg="dsz"
}
},
beforeCreate() {
// 组件创建之前
console.log('组件创建之前', this.msg);
},
created() {
//!!!!!!!!!!!!!!!!!!!!!!
// 组件创建之后,此时的DOM还没有渲染完成
//作用:可用来发送ajax,获取ajax数据,为DOM操作提供数据支撑
console.log('组件创建之后', this.msg);
}, beforeMount() {
// 挂载之前:
console.log(document.getElementById('app'));
},
mounted() {
//!!!!!!!!!!!!!!!!!!!!!!
//挂载之后:Test挂载在App上,App挂载在Vue上
//作用:可以在此处操作DOM,
console.log(document.getElementById('app'));
}, beforeUpdate() {
// 在更新之前，调用此钩子，应用：获取原始的DOM
console.log(document.getElementById('change').innerHTML); },
updated() {
// 在更新之后，调用此钩子，应用：获取最新的DOM
console.log(document.getElementById('change').innerHTML);
}, beforeDestroy() {
//在组件销毁之前
console.log('beforeDestroy');
},
destroyed() {
//在组件销毁之后
//作用:常用于清除定时器
console.log('destroyed',this.timer);
}, activated(){
console.log('组件被激活了');
},
deactivated(){
console.log('组件被停用了');
}
};
let App={
data(){
return{is_show:true}
},
template: `<div><keep-alive><Test v-if="is_show"></Test></keep-alive><button @click="change_test">改变test组件的生死</button></div>`,
methods:{
change_test(){
this.is_show=!this.is_show
}
},
components:{
Test
}
};
new Vue({
el:"#app",
data(){
return{}
},
template: `<div><App></App></div>`,
components:{
App
} })
</script>
</body>
注:keep-alive
Vue提供的内置组件
主要作用:让组件产生缓存
注:获取DOM的救命稻草
document.querySelector("#app")
四.Vue全家桶:vue,vue-router,vuex
vue-router是vue的核心插件
vue+vue-router 主要来做 SPA（Single Page Application） 单页面应用
为什么要使用单页面应用:
传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动。为了用户体验
注:掘金,开发者资源网站
1.vue-router下载
下载地址:https://unpkg.com/vue-router/dist/vue-router.js
注:vue-router插件依赖于vue
2.vue-router下载的基本使用
<body>
<div id="app">
<p>
<!--router-link和router-link是vue-router的两个全局组件-->
<!--router-link相当于a标签 to相当于href-->
<router-link to="/">首页</router-link>
<router-link to="/course">课程</router-link>
</p>
<!--router-view是整个路由组件的出口-->
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
//0.如果是模块化编程,必须要加这句话,相当于Vue.proptotype.$VueRouter=VueRouter,给Vue的原型上挂载一个属性
// Vue.use() //3.定义路由组件
const Home={
template:`<div>我是主页内容</div>`
};
const Course={
template:`<div>我是课程内容</div>`
}; //1.创建router实例
const router=new VueRouter({
//摆脱了哈希,它使用URL的哈希来模拟一个完整的URL
mode:'history',
routes:[
//2.定义路由规则
{
path:'/',
//对访问地址重定向
redirect:'/home'
},
{
path:'/home',
component:Home
},
{
path:"/course",
component:Course
}
]
}); //4.创建并挂载router实例
const app=new Vue({
//key和value相同写一个
router
}).$mount("#app")
</script>
</body>
3.路由命名
(1)在routes中定义name
(2)在使用时对router-link的to属性绑定
<body>
<div id="app">
<p>
//(2)在使用时对router-link的to属性绑定
<router-link :to='{name:"Home"}'>首页</router-link>
<router-link :to="{name:'Course'}">课程</router-link>
</p>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script> const Home={
template:`<div>我是首页</div>`
}; const Course={
template:`<div>我是课程</div>`,
}; const router=new VueRouter({
routes:[
{
//(1)在routes中定义name
path:'/home',
name:'Home',
component:Home
},
{
path:'/course',
name:'Course',
component:Course
}
]
});
const app=new Vue({
router,
}).$mount("#app")
</script>
</body>
4.动态路由匹配
如果是动态路由用parmas
如果是get请求信息用query
<body>
<div id="app">
<p>
//使用时
<router-link :to='{name:"Home",params:{id:1}}'>第一页</router-link>
<router-link :to='{name:"Home",params:{id:2}}'>第二页</router-link>
</p>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script> const Home={
data(){
return{
user_id:3
}
},
template:`<div>我是首页{{ user_id }}</div>`,
watch:{
//路由信息对象(到哪里去,从哪里来)
'$route'(to,from){
console.log(111)
console.log(to);
this.user_id = to.params.id;
}
}
}; const router=new VueRouter({
routes:[
{
//定义时
path:'/home/:id',
name:'Home',
component:Home
}
]
});
const app=new Vue({
router,
}).$mount("#app")
</script>
</body>
5.编程式导航
编程式通过自己的逻辑,来实现复杂的业务 声明式是通过框架自带的标签属性来完成业务 前者需要自己写大量重复的事务控制代码，后者通过设置可以一次性给所有的业务方法添加上事务特性。
vue补充的更多相关文章
- vue组件，vue补充和总结，JS循环遍历和加减运算、类型转换补充
目录 一.vue中的组件 1. 组件的概念 2. 组件分类 3. 组件的特点 4. 组件的定义 5. 组件化 (1)用法和注意 (2)数据组件化实例 6. 组件传参--父传子 (1)用法和注意 (2) ...
- vue.js及项目实战[笔记]— 03 vue.js插件
一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...
- Vue加载组件、动态加载组件的几种方式
https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-dynamic-async ...
- Vue基础简介
目录 vue基础 一.导入vue 二.vue挂载点 三.vue变量 四.vue事件 五.vue文本指令 六.vue事件指令 七.vue属性指令 vue基础 一.导入vue 补充:vue的语句以及导入j ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础：框架初探
缘起 哈喽大家好,又是周四了,俗话说周四来了,周末还远么哈哈,老张我也想下周请假,来个16天的大长假哟,不知道大家是怎么请假的,近来发现文章下边已经没有人评论了,赶脚比较凄凉了,大家看到的麻烦点个赞呀 ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 三十║ Nuxt实战：动态路由+同构
上期回顾 说接上文<二九║ Nuxt实战:异步实现数据双端渲染>,昨天咱们通过项目二的首页数据处理,简单了解到了 nuxt 异步数据获取的作用,以及亲身体验了几个重要文件夹的意义,整篇文章 ...
- python 全栈开发，Day93(vue内容补充,VueX)
昨日内容回顾 1. 页面的布局 Vue中使用Bootstrap搭页面 1. 安装 1. npm install bootstrap@3.3.7 -S 2. 使用 1. import 'bootstra ...
- 四、vue语法补充
1.自定义过滤器 格式: {{ msg | filters}} 2.computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter <!DOCTYPE html> ...
- （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
随机推荐
- PS 滤镜算法— — 表面模糊
图像的表面模糊处理,其作用是在保留图像边缘的情况下,对图像的表面进行模糊处理.在对人物皮肤处理上,比高斯模糊更有效.因为高斯模糊在使人物皮肤光洁的同时,也将一些边缘特征如脸部的眉毛.嘴唇等给模糊了,不 ...
- centos 7 构造iptables开放80port
centos7默认是使用firewalld托管防火墙. 安装后centos7后,已安装nginxserver,但同样没有在一个局域网访问,我哥哥告诉我,我应该是一个防火墙以打开.防火墙关闭就可以了. ...
- 升级cocoapods 0.36.0之后，解决更新的部分依赖库，不是最新版本号的问题
在升级到cocoapods 0.36.0之后,使用原本podfile配置,在又一次运行pod install之后,一些依赖库的版本号,低于github上的最新版本号.可依照下列配置.指定git,强制使 ...
- Linux下编译，要下载tar.xz，而不要下载zip，因为换行的编码不一样，对.h.cpp没有影响，但是对脚本有影响 good
原因是 在win下编辑的时候,换行结尾是\n\r , 而在linux下 是\n,所以才会有 多出来的\r但是这个我是直接下载的官网文件解压的,没有动过啊. 破案了. linux下编译要下 .tar.x ...
- Maven环境下Poi的使用
Poi的使用方法,网上还是挺多的,官网也有教程. 附一个比较全的: http://www.cnblogs.com/vTree/archive/2011/11/30/2268721.html 需要说明的 ...
- python3 小技巧(2)
原文 http://blog.csdn.net/jclass/article/details/6145078 一. base64 编码和解码任意的二进制字符串到文本字符串(主要用在HTTP EMAIL ...
- Distinct去除重复项
之前在做权限模块时,因不同角色可能拥有相同的菜单,导致呈现在浏览器上时出现重复菜单项,所以需要在获取用户拥有菜单项时需要过滤重复项, 用到了Distinct,两个重载 public static IQ ...
- WPF loading加载动画库
原文:WPF loading加载动画库 1. 下载Dll https://pan.baidu.com/s/1wKgv5_Q8phWo5CrXWlB9dA 2.在项目中添加引用 ...
- [bug系列]Method not found: 'Void Microsoft.EntityFrameworkCore.Storage.Internal.RelationalCommandBuilderFactory
bug由来 最近开始学习NetCore,想通过实战使用NetCore做一个集成数据库存储Redis缓存的WebApi项目,由于MSSQL的庞大体积,最终决定使用轻量级关系型数据库MySql. 所以最终 ...
- TargetNullValue与FallbackValue
原文:TargetNullValue与FallbackValue TargetNullValue与FallbackValue都是BindingBase的属性. TargetNullValue:获取或设 ...