其实组件使用起来没难度,有难度的是要先了解Vue的语法,然后才能用起来它的组建cuiyaonan2000@163.com
参考资料:
- Vue.js 模板语法 | 菜鸟教程 --语法
- Element - The world's most popular Vue UI framework ---组件
site : {{site}}
url : {{url}}
{{details()}}
var vm = new Vue({
el: '#vue_det',
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学的不仅是技术，更是梦想！";
}
}
})
代码解释:
属性el表示绑定,html中id一致的element.
属性data针对该element中出现的元素进行设置值和方法.
{{ }} 用于输出对象属性和函数返回值。有点想EL表达式,同时提供了完全的 JavaScript 表达式支持。例如: {{5+5}} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
针对如上的el对象实例vm,它自带了属性和方法,但是需要使用$进行调用. 比如: document.write(vm.$data === data) // true document.write("") document.write(vm.$el === document.getElementById('vue_det')) // true
语法环境
现在你看到我了
new Vue({
el: '#app',
data: {
message: '菜鸟教程'
use: false
seen: true
}
})
使用 v-html 指令用于输出 html 代码
HTML 属性中的值应使用 v-bind 指令。以上实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类. :class是缩写
指令是带有 v- 前缀的特殊属性。 v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
另一个例子是 v-on 指令，它用于监听 DOM 事件, @click 是缩写
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
属性值过滤器
{{ message | capitalize }}
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
过滤器函数接受表达式的值作为第一个参数。
写法如下所示
{{ message | capitalize }}
条件&循环
A
B
C
Not A/B/C
Hello!
-
{{ index }}. {{ key }} : {{ value }}
new Vue({
el: '#app',
data: {
type: 'C'
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
我们也可以使用 v-show 指令来根据条件展示元素
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
属性get与set事件监听
Vue 测试实例 - 菜鸟教程(runoob.com)
{{ site }}
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('');
document.write('url: ' + vm.url);
声明了一个计算属性 reversedMessage 。
提供的函数将用作属性 vm.reversedMessage 的 getter 。
vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
监听属性变化事件
千米 :
米 :
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) {
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。
以下实例通过使用 watch 实现计数器：
花式绑定样式案例
Vue.js 事件处理器 | 菜鸟教程
v-on
Say hi
Say what
new Vue({
el: '#app',
methods: {
say: function (message) {
alert(message)
}
}
})
事件监听可以使用 v-on 指令
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js 通过由点 . 表示的指令后缀来调用修饰符。
.stop - 阻止冒泡.prevent - 阻止默认事件.capture - 阻止捕获.self - 只监听触发该元素的事件.once - 只触发一次.left - 左键事件.right - 右键事件.middle - 中间滚轮事件
...
...
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
.enter.tab.delete (捕获 "删除" 和 "退格" 键).esc.space.up.down.left.right.ctrl.alt.shift.meta
v-model与Select,radio,checkbox绑定
Vue.js 表单 | 菜鸟教程
组件的基础
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
全局组件&局部组件
//全局组件
// 注册
Vue.component('runoob', {
template: '自定义组件!'
})
// 创建根实例
new Vue({
el: '#app'
})
//局部组件及只能在实例中使用
var Child = {
template: '自定义组件!'
}
// 创建根实例
new Vue({
el: '#app',
components: {
// 将只在父模板可用
'runoob': Child
}
})
父组件给子组件传递信息----Prop
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '{{ message }}'
})
// 创建根实例
new Vue({
el: '#app'
})
动态 Prop
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
// 注册
Vue.component('child', {
// 声明 props
props: ['message'],
// 同样也可以在 vm 实例中像 "this.message" 这样使用
template: '{{ message }}'
})
// 创建根实例
new Vue({
el: '#app',
data: {
parentMsg: '父组件内容'
}
})
以下实例中使用 v-bind 指令将 todo 传到每一个重复的组件中：
Vue.component('todo-item', {
props: ['todo'],
template: '{{ todo.text }} '
})
new Vue({
el: '#app',
data: {
sites: [
{ text: 'Runoob' },
{ text: 'Google' },
{ text: 'Taobao' }
]
}
})
Prop 验证
组件可以为 props 指定验证要求。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
type 可以是下面原生构造器：
StringNumberBooleanArrayObjectDateFunctionSymbol
type 也可以是一个自定义构造器，使用 instanceof 检测。
