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 ...
随机推荐
- Linq知识小总结
一.投影操作符 Select Select操作符对单个序列或集合中的值进行投影. 返回 IEnumerable<类名> //查询语法 var query = from e in db.Em ...
- Android Studio:Grade 全局参数定义
Grade 全局参数定义 实际开发中设置公共的编译依赖参数等. 方法一: 在项目外层的build.gradle文件中定义,格式如下: 文件名:build.gradle ext { sourceComp ...
- NET SignalR2
.NET SignalR2持久连接层解析 越是到年底越是感觉浑身无力,看着啥也不想动,只期盼着年终奖的到来以此来给自己打一针强心剂.估摸着大多数人都跟我一样犯着这样浑身无力的病,感觉今年算是没挣到 ...
- 显示dll里的QWidget
1 新建库->C++库 2 命名(此处为mydll)并选择共享库--下一步--下一步 3 选择所需要的模块(有使用到的都选上)此处勾选前三项QtCore+QtGui+QtWidgets 4 完成 ...
- Netty源代码学习——EventLoopGroup原理：NioEventLoopGroup分析
类结构图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd29ya2luZ19icmFpbg==/font/5a6L5L2T/fontsize/400/f ...
- HistCite 引文分析软件的利器
所需工具及网站清单, HISTCITE:DOWNLOAD YOUR FREE COPY. 提交自己的基本信息即可,十分简单: SCI数据库官网(web of science):http://apps. ...
- 在sqlserver中，使用sql语句更新数据库:生成随机数，更新每一行中的年龄字段
use School --指定数据库 declare @min_id int --声明整数变量@x set @min_id=(select MIN(Id) from Students) --给变量@x ...
- 算法模型的 Motivations
neurally-inspired biologically-inspired 1. CNN:biologically-inspired CNN(Convolutional Neural Networ ...
- Qt on Android 资源文件系统qrc与assets
使用 Qt 为 Android 开发应用时,有时我们的应用会携带一些资源文件,如 png . jpg 等,也可能有一些配置文件,如 xml 等,这些文件放在哪里呢?有两种方式:qrc和assets,咱 ...
- WPF(C#)中Bitmap与BitmapImage相互转换
原文:WPF(C#)中Bitmap与BitmapImage相互转换 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangshubo1989/art ...