摘要:指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于。对象形式佐客汤姆咪口修饰符修饰符是以半角句号指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。
指令
指令(Directives)是带有v-前缀的特殊属性。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于DOM。
v-if条件判断Title
Paragraph 1
Paragraph 2
元素当做不可见的包裹元素
v-if是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。 与v-if不同,v-show只是进行CSS的变换。 绑定url到href,当url有变化可响应dom重渲染,可缩写成 绑定doSomething函数到a标签的点击事件,可缩写成 可循环渲染动态选项,数组形式 与react不同,react需要使用map方法遍历返回组件,vue直接把循环挂在标签属性上。 对象形式 修饰符(Modifiers)是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。例如,.prevent修饰符告诉v-on指令对于触发的事件调用 event.preventDefault():
.prevent => event.preventDefault()
.stop => event.stopPropagation()
.capture 使用事件捕获
.self 只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
.once 事件只触发一次 全部的按键别名: .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 在 Mac 系统键盘上,meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。 .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。 .left .right .middle 这些修饰符会限制处理函数仅响应特定的鼠标按钮。 基础例子如下 Original message: "{{ message }}" Computed reversed message: "{{ reversedMessage }}" computed下的reversedMessage方法依赖data下的变量message,当message发生变量,reversedMessage会重新计算结果,与mobx中的computed的作用相同。 Reversed message: "{{ reversedMessage() }}" 不同的是计算属性是基于它们的依赖进行缓存的。 计算属性computed也可同时设置setter和getter方法取代直接写funciton,如下: 结果为: v-model指令在表单input及textarea元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。 Message is: {{ message }} 多行文本 {{ message }} 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: 如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符: 如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符: 组件 (Component) 是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用is特性进行了扩展的原生 HTML 元素。 全局注册组件 局部注册组件 由于html元素之间不能随意嵌套,如table、ul、ol,所以在自定义组件中使用这些受限制的元素时会导致一些问题,例如: 自定义组件 但是如果代码来自以下字符串模板,则没有这个限制: JavaScript 内联模板字符串 .vue 组件 声明的组件data必须为一个函数并返回响应数据,否则会出现警告并停止运行,声明比如类似如下: 与react类似,prop为传入组件的参数,属于单向数据流,如果是绑定了父组件的data,变化会引起DOM重渲染,声明组件时候需要声明预期的props,如下: 由于HTML不区分大小写,声明prop的时候我们需要声明为camelCase驼峰命名形式,但是传入的时候必须写成kebab-case短横线分隔式命名。如下: 动态Prop prop声明时可以指定特定规则,规范prop的格式,如: type也可以是一个自定义构造器函数,使用instanceof检测。 通过使用保留的 也可以直接绑定到组件对象上: Welcome home! 父组件模板: 这是一些初始内容 这是更多的初始内容 渲染结果: 这是一些初始内容 这是更多的初始内容 父组件模板: 主要内容的一个段落。 另一个主要段落。 这里有一些联系信息 渲染结果为: 主要内容的一个段落。 另一个主要段落。 在设计组合使用的组件时,内容分发 API 是非常有用的机制。 但是有时仍然需要在JavaScript中直接访问子组件。与react类似,可以使用ref为子组件指定一个引用ID。例如: 当ref和v-for一起使用时,获取到的引用会是一个数组,包含和循环数据源对应的子组件。 使用 $on(eventName) 监听事件 使用 $emit(eventName, optionalPayload) 触发事件 例子如下: {{ msg }} 可以使用v-on的修饰符.native。例如: 该修饰符可以让一个prop变成"双向绑定",如下 当comp内修改了foo变量时,父组件的foo也会同时被修改,该修饰符Vue2.0后被移除,在Vue2.3又被引入,只是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。如上例子会被扩展成: 当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件: 默认情况下,一个组件的 v-model 会使用 value prop 和 input 事件。但是诸如单选框、复选框之类的输入类型可能把 value 用作了别的目的。model 选项可以避免这样的冲突: 上述代码等价于:Hello!
...
...
v-on事件绑定
...
...
v-for循环
data: {
options: {
jock: "佐客",
tom: "汤姆",
miko: "咪口"
}
}
修饰符
鼠标按钮修饰符
var vm = new Vue({
el: "#example",
data: {
message: "Hello"
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split("").reverse().join("")
}
}
})
以上例子也可通过method属性完成,如下// 在组件中
methods: {
reversedMessage: function () {
return this.message.split("").reverse().join("")
}
}
computed: {
fullName: {
// getter
get: function () {
return this.firstName + " " + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(" ")
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
侦听器watch
new Vue({
data: {
watchData: ""
},
watch: {
watchData: function (newData, oldData) {
// doSomething
}
}
})
Class与Style
class的对象形式,与classnames模块类似
class数组形式
data: {
activeClass: "active",
errorClass: "text-danger"
}
class对象与数组混合使用
在组件上使用
Vue.component("my-component", {
template: "
"
})
style对象形式
data: {
activeColor: "red",
fontSize: 30
}
style数组形式
表单输入绑定
如:
Multiline message is:
.lazy
.number
请注意,对于自定义标签的命名Vue.js不强制遵循W3C规则 (小写,并且包含一个短杠),尽管这被认为是最佳实践。Vue.component("my-component", {
// 选项
})
var Child = {
template: "
var data = { counter: 0 }
Vue.component("simple-counter", {
template: "",
// 技术上 data 的确是一个函数了,因此 Vue 不会警告,
// 但是我们却给每个组件实例返回了同一个对象的引用
data: function () {
return {
counter: 0
}
}
})
new Vue({
el: "#example-2"
})
Prop
Vue.component("child", {
// 声明 props
props: ["message"],
// 就像 data 一样,prop 也可以在模板中使用
// 同样也可以在 vm 实例中通过 this.message 来使用
template: "{{ message }}"
})
Vue.component("child", {
// 在 JavaScript 中使用 camelCase
props: ["myMessage"],
template: "{{ myMessage }}"
})
可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时,该变化也会传导给子组件:
new Vue({
el: "#prop-example-2",
data: {
parentMsg: "Message from parent"
}
})
Vue.component("example", {
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: "hello" }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})
var vm = new Vue({
el: "#example",
data: {
currentView: "home"
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
var Home = {
template: "
插槽
假定 my-component 组件有如下模板:我是子组件的标题
我是父组件的标题
我是父组件的标题
我是子组件的标题
例如,假定我们有一个 app-layout 组件,它的模板为:这里可能是一个页面标题
这里可能是一个页面标题
var parent = new Vue({ el: "#parent" })
// 访问子组件实例
var child = parent.$refs.profile
Vue.component("button-message", {
template: `
给组件绑定原生事件
.sync修饰符
this.$emit("update:foo", newValue)
自定义组件的v-model
Vue.component("my-checkbox", {
model: {
prop: "checked",
event: "change"
},
props: {
checked: Boolean,
// 这样就允许拿 `value` 这个 prop 做其它事了
value: String
},
// ...
})
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/94320.html
摘要:菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数,可以通过来返回函数值。它们都有前缀,以便与用户定义的属性区分开来。 开篇语 我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...
摘要:有兴趣的同学可以查看之前发布的文章学习系列一学习实践笔记附学习系列二学习实践笔记附学习系列三和网络传输相关知识的学习实践学习系列四打包工具的使用学习系列五从来聊聊学习系列项目地址项目暂时有点乱,之后会进行整理优化。 上次学习了vue-router的使用,让我能够在各个页面间切换,将页面搭建了起来。这次则要学习vue的状态管理模式——vuex。它类似于redux来应用的全局状态。 注:本...
摘要:提供了两种向组件传递参数的方式。子路由项路径不要使用开头,以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上,是通过不同的将这些资源加载后打包,然后输出打包后文件。 一、vue-router 1、简介 我们经常使用vue开发单页面应用程序(SPA)。在开发SPA过程中,路由是必不可少的部分,vue的官方推荐是vue-router。单页面应用程序看起来好像...
摘要:提供了两种向组件传递参数的方式。子路由项路径不要使用开头,以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上,是通过不同的将这些资源加载后打包,然后输出打包后文件。 一、vue-router 1、简介 我们经常使用vue开发单页面应用程序(SPA)。在开发SPA过程中,路由是必不可少的部分,vue的官方推荐是vue-router。单页面应用程序看起来好像...
阅读 3117·2021-11-24 09:39
阅读 2375·2021-10-08 10:05
阅读 2956·2021-09-24 13:52
阅读 1699·2021-09-22 15:07
阅读 685·2019-08-30 15:55
阅读 1881·2019-08-30 15:53
阅读 765·2019-08-30 15:44
阅读 3204·2019-08-30 11:20