JS框架之vue.js怎么应用
这篇文章主要讲解了“JS框架之vue.js怎么应用”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JS框架之vue.js怎么应用”吧！
成都创新互联公司是一家专注于网站制作、成都做网站与策划设计,象山网站建设哪家好?成都创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:象山等地区。象山做网站价格咨询:18980820575
1.举个栗子
//model层：
// 通过extend方式定义一个Vue组件
var MyComponent = Vue.extend({
template: 'A custom component!
'
})
// 向Vue注册这个组件，名称定为my-component
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
//Vue层：
渲染为：
A custom component!
就是这个栗子，差点把我忽悠了，以为前面对extend的概念理解错了。还记得前面是这么描述
var MyComponent = Vue.extend（）的，Vue相当于基类，MyComponent继承了Vue，拥有了Vue的属性和方法，但是继承的概念还有另一层，就是基类是木有子类自定义的属性和方法的。这里的子类MyComponent扩展了一个属性template，按照继承的说法，Vue基类是不能使用的，但是这个栗子看似违背了这个规则，最后创建的是Vue实例，同时让模板生效了。正常的写法不是应该这样：
//model层：
// 通过extend方式定义一个Vue组件
var MyComponent = Vue.extend({
template: 'A cu stom component!
'
})
// 不用注册
//Vue.component('my-component', MyComponent)
// 创建MyComponent 实例
new MyComponent ({
el: '#example'
})
//Vue层：
//不用组件
//
经过试验，这种写法确实没错，也可以正常显示。问题来了，为什么第一种写法也是可以的，比较两处代码，发现第一种写法有一个注册过程，注册了一个my-component,最后使用的也是这个my-component，仔细想想，并不是说Vue实例可以使用template，而是向Vue注册了这个组件后，Vue实例就可以使用这个组件了，所以并不冲突。（吓死宝宝了- -）
Vue 的模板是 DOM 模板，使用浏览器原生的解析器而不是自己实现一个。所以组件被替换后必须依照html的正常标准来，它必须是有效的 HTML 片段。一些 HTML 元素对什么元素可以放在它里面有限制。常见的限制：
。为此，is属性便有作用了，将以上写法改写：
// 定义
var MyComponent = Vue.extend({
template: 'A custom component!
' //这里不能用tr
})修改后，相当于
保留了原来的tr，所以dom解析不会出错
4.Props：组件通讯的手段
4.1“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项 声明 props：
Vue.component('child', {
// 声明 props，这里驼峰式命名
props: ['myMessage'],
//模板中可以这样用
template: '{{ myMessage }}'
})HTML 特性不区分大小写。名字形式为 camelCase 驼峰式的 prop 用作特性时，需要转为 kebab-case（短横线隔开），所以html中是这个样子的：
以上这种是props的静态用法，也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件：
这时候看到v-model有点懵逼，这货不是跟{{}}类似，引用data属性中的parentMsg吗？此时肯定是没有定义parentMsg的，所以v-bind：my-message=”parentMsg”绑定组件的同时，赋予了父组件parentMsg属性。
4.2 prop的绑定类型：
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定：
双向绑定会把子组件的 msg 属性同步回父组件的 parentMsg 属性。单次绑定在建立之后不会同步之后的变化。这里原文还特定强调了下， prop 是一个对象或数组时，是按引用传递，修改内容会随时修改父组件内容，这个有语言基础的都知道。
4.3 prop验证：
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用，因为这些验证要求构成了组件的 API，确保其他人正确地使用组件。此时 props 的值是一个对象({}而不是[])，包含验证要求：
Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB: {
type: String,
required: true
},
// 数字，有默认值
propC: {
type: Number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE: {
twoWay: true
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
},
// 转换函数（1.0.12 新增）
// 在设置值之前转换值
propG: {
coerce: function (val) {
return val + '' // 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 将 JSON 字符串转换为对象
}
}
}
})type 可以是下面原生构造器：
String
Number
Boolean
Function
Object
Array
type 也可以是一个自定义构造器，使用 instanceof 检测。
当 prop 验证失败了，Vue 将拒绝在子组件上设置此值，如果使用的是开发版本会抛出一条警告。
这里也是看的我一脸懵逼，连个栗子都不给，拿刚才的例子改一下打个比方
Vue.component('child', {
// 声明 props，这里驼峰式命名
props: ['myMessage'],
//模板中可以这样用
template: '{{ myMessage+1}}' //改成表达式
})
//这里先不改如果我们希望别人把child组件的myMessage当做Number类型来处理，而我们这里又没有做prop验证，结果就是{{ myMessage+1}}会变成字符串拼接，当html传入的是hello!,渲染出来结果：hello!
所以说，告诉别人这里要传入Number类型是必要的，于是改为：
Vue.component('child', {
// 声明 props，这里驼峰式命名
props: {myMessage:Number},
//模板中可以这样用
template: '{{ myMessage+1}}' //改成表达式
})这时候如果传入hello！，此时渲染结果？没错，就是NaN。这样别人就知道要传入一个数字了。
如果这样传入
//改成123
这样总行了吧，运行，他喵的居然还不行，还是NaN。原文有这样的解释：
//#字面量语法 vs. 动态语法
//初学者常犯的一个错误是使用字面量语法传递数值：
因为它是一个字面 prop，它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用动态语法，从而让它的值被当作 JavaScript 表达式计算：
好吧，也就是说刚才传递的实际上是字符串”123”，结果必然是NaN,再改：
//改成123
此时{{myMessage+1}}会得到正确的结果：124
感谢各位的阅读，以上就是“JS框架之vue.js怎么应用”的内容了，经过本文的学习后，相信大家对JS框架之vue.js怎么应用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！
新闻名称：JS框架之vue.js怎么应用
当前路径：http://bzwzjz.com/article/jsdcjg.html
