资讯专栏INFORMATION COLUMN

vue2.0指不了南

张红新 / 2663人阅读

摘要:回调函数会接收所有传入事件触发函数的额外参数。添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。

零.混沌 vue是什么

vue是一套构建用户界面的渐进式框架。

他的特点:

简洁:页面由HTML模板+Json数据+Vue实例组成

数据驱动:自动计算属性和追踪依赖的模板表达式

组件化:用可复用、解耦的组件来构造页面

轻量:代码量小,不依赖其他库

快速:精确有效批量DOM更新

模板友好:多种方式安装,很容易融入

所需要储备的技术

扎势的html,css,JavaScript基础知识 火狐中文社区 https://developer.mozilla.org...

es6相关知识 ECMAScript 6 入门 http://es6.ruanyifeng.com/#RE...

nodejs相关知识 npm 基本用法和实用技巧 https://github.com/theicebear...

webpack相关知识 webpack中文社区 https://doc.webpack-china.org/

可以简单的使用命令终端

使用vue-cli 创建项目
1. node 环境安装(更新到最新)
2. vue-cli 脚手架安装

2.1 npm install vue-cli -g

3. 创建项目

3.1 vue init webpack 项目名称

4. 进入该目录

4.1 cd 项目名称

5. 安装依赖包

5.1 npm install(或者简写 i )

6. 启动项目

npm run dev

模板语法
数据绑定最常见的形式

使用 “Mustache” 语法(双大括号)的文本插值: {{msg}}

使用 v-bind 在 HTML 属性中使用:

一.指令 1. 内置指令 1.1 v-text:更新元素的 textContent。

等同于 {{msg}}

1.2 v-html:更新元素的 innerHTML。注意:内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译

1.3 v-show:切换元素的 display CSS 属性。 1.4 v-if:在切换时元素及它的数据绑定 / 组件被销毁并重建。 1.5 v-else:配合v-if使用。 1.6 v-else-if:配合v-if使用
    
`
1.7 v-for:基于源数据多次渲染元素或模板块。

    数组更新检测的方法有

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

   重塑数组方法

filter()

concat()

slice()

     注意事项 

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:

当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue 解决办法 Vue.set(example1.items, indexOfItem, newValue)

当你修改数组的长度时,例如: vm.items.length = newLength 解决办法example1.items.splice(newLength)

1.8 v-on:绑定事件监听器。可以简写为:@

监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$on("test", function(msg) {
    console.log(msg)
})
vm.$emit("test", "hi")

修饰符:

.stop - 调用 event.stopPropagation()

.prevent- 调用 event.preventDefault()。

.capture - 添加事件侦听器时使用 capture 模式。

.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.native - 监听组件根元素的原生事件。

1.9 v-bind:动态地绑定一个或多个特性,或一个组件 prop 到表达式。可以简写为::

",
  components: { App }
})

### router.js ###

import VueRouter from "vue-router"

Vue.use(VueRouter)

export default new Router({
  routes: [
    {
      path: "/",
      name: "foo",
      component: foo
    }
})
1. 动态路由匹配 2. 嵌套路由 3. 重定向 和 别名 4. 获取数据 5. 懒加载 四.状态管理 1. 状态管理模式是什么 2. 核心概念解释 2.1 State 2.2 Getters 2.3 Mutations 2.2 Actions 2.2 Moudules 3. 推荐的项目结构 五.动画

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82310.html

相关文章

  • vue2.0开发聊天程序(五) 客户端的webScoket

    摘要:先看看兼容性创建连接构造函数接收两个参数这里的不能是或者而是对应的或者和是定义的两种方案,类似于类似于协议名称,是可选的。服务端和客户端的协议名称必须一致。协议有三种注册协议,开放协议,自定义协议。限制以内就是在构造函数中选传的参数。 愿天下所有的情侣,都是失散多年的兄妹                  ——好妹妹webScoket是html5提出的一个协议,咱们用的http是无状态...

    meteor199 评论0 收藏0
  • Vue2.0 仿滴滴出行项目

    摘要:仿滴滴出行项目最近,各大社区出现很多小伙伴的项目,趁着这股热潮我也用撸了一个滴滴出行的项目。可是,后来在手机上发现,输入的时候居然调不出软键盘,写项目的时候没考虑到设备问题,简直是大大的失误。也就是说可以在组件内部进行请求,不需要提交。 Vue2.0 仿滴滴出行项目 最近,各大社区出现很多小伙伴的vue项目,趁着这股热潮我也用vue撸了一个滴滴出行的项目。 效果预览 showImg(h...

    ShevaKuilin 评论0 收藏0
  • vue2实践(持续更新)

    摘要:记录一些小技巧和踩过的坑由于本篇文章内容太多,导致编辑器有点卡,所以新开辟了一篇实践二,后续再这里更新。组件的生命周期函数是在标签里的数据发生变化时候触发数据可能更新了,但是没有绑定到上面的话,不会调用钩子函数。 记录一些小技巧和踩过的坑 由于本篇文章内容太多,导致SF编辑器有点卡,所以新开辟了一篇 vue2实践(二),后续再这里更新。 1. props 带不带冒号的区别 ...

    n7then 评论0 收藏0
  • 中国优秀的架构师是不是出现了严重断层?

    摘要:经过近两个小时的讨论,很不幸我们得出了最后的结论在国内互联网发展的这年间,短平快的发展模式造成了中国软件工程领域架构师的严重断层。中国真正的架构师在哪里在和产品组里的同学的讨论过程中。 点击上方蓝色字体,选择设为星标 回复面试获取更多惊喜 背景 我先说下这篇文章的背景。 放假前的晚上,...

    tabalt 评论0 收藏0
  • 前方来报,八月最新资讯--关于vue2&3的最佳文章推荐

    摘要:哪吒别人的看法都是狗屁,你是谁只有你自己说了才算,这是爹教我的道理。哪吒去他个鸟命我命由我,不由天是魔是仙,我自己决定哪吒白白搭上一条人命,你傻不傻敖丙不傻谁和你做朋友太乙真人人是否能够改变命运,我不晓得。我只晓得,不认命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出处 查看github最新的Vue...

    izhuhaodev 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<