<Vue2.x>总结：注意点
2018-06-09 本文已影响10人
玉圣
一、组件间通信
1、多层组件间通信的命名问题
1.1、问题
在使用多层组件间通信的时候，经过反复测试，发现创建的组件，名称不能使用驼峰式的写法，使用后，则无法展示使用
1.2、试例：
注：这不是示例，是来测试的例子，所以叫试例
- 正常显示情况：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue多层组件通信</title>
</head>
<body>
<div id="app">
<group :name="nick" :photo="pic"></group>
</div>
<template id="pic_iv">
<img :src="src" alt="" width="200">
</template>
<template id="name_tv">
<p>{{name}}</p>
</template>
<template id="s_group">
<div>
<Imageview :src="photo"></Imageview> //小写的v
<Textview :name="name"></Textview> //小写的v
</div>
</template>
<script src="js/vue.js"></script>
<script>
//js相关代码
let iv = Vue.extend({
template:"#pic_iv",
props:["src"]
});
let tv = Vue.extend({
template: "#name_tv",
props:["name"]
});
Vue.component("group", {
template:"#s_group",
props:["name", "photo"],
components:{
"Imageview" : iv,
"Textview" : tv
}
});
new Vue({
el:'#app',
//Vue 实例的数据对象
data: {
nick:"张三李四王二五",
pic:"img/girl2.jpg"
},
});
</script>
</body>
</html>
显示结果
- 非正常显示情况：
如果将其中定义的模板<template id="s_group">中的内容改为如下：
（注意：其中 ImageView 中的V的大小写）
<template id="s_group">
<div>
<imageView :src="photo"></imageView> //错误写法：大写的V
<image-view :src="photo"></image-view> //正确写法，需要将驼峰写法变为：短横线+小写
<Text_view :name="name"></Text_view>
</div>
</template>
//.....
Vue.component("group", {
template:"#s_group",
props:["name", "photo"],
components:{
"imageView" : iv, //ImageView的V大写了
"Text_view " : tv
}
});
//.....
显示结果
1.3、结论：
从当前例子中可以得出结论，因此在命名组件的时候，可以有如下的方式（但不局限）
- 首字母可以大写，（但不可以使用下划线）
- 两字母间可以使用下划线（_）连接
- 如果使用驼峰式命名， 如“ImageView”，来定义组件名称，则需要在使用组件的时候，将组件名中的驼峰字母修改为“-小写字母”的样式，如"image-view"
二、组件的使用
1、v-text 和 v-html 以及 {{}} 的区别
详见：https://www.jianshu.com/p/4131e8b033de
1.1、作用
-
v-text可操作元素中的纯文本，及动态显示元素中的文本内容 -
{{}}是v-text的简写形式，放在元素标签之间 -
v-html操作元素中的HTML标签
1.2、区别：
-
v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出 -
{{}}和v-text都是模板语法，都可输出元素中的文本内容- 但当网速很慢或者下面的JavaScript写错时，会直接将
{{message}}渲染到页面 - 而使用
v-text="message"如果出错是不显示的，在实际开发中用v-text比较多
- 但当网速很慢或者下面的JavaScript写错时，会直接将
1.3、注意：
- 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
- 如果想在
v-text中输出固定的字符串，则需要使用单引号将文本内容引起来，否则就会出错 - 在
v-text=""中直接使用定义的变量即可，不需要在用{{}}将变量包裹起来了
1.4、示例：
//html
<h1 id="app1" v-text="'今天是'+year+'年'+month+'月'"></h1>
//javascript
var app1 = new Vue({
el : "#app1",
data : {
year : new Date().getFullYear(),
month : new Date().getMonth()+1
}
})
2、浏览器解析某些组件，显示错误的问题
1.1、错误示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>is的使用，解决浏览器渲染组件错误的问题</title>
</head>
<body>
<div id="app">
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component("row", {
template: '<tr><td>这是一个单元格</td></tr>'
});
let vm = new Vue({
el: "#app",
data: {
}
});
</script>
</body>
</html>
显示结果
1.2、问题及分析：
- 在标签的使用中，table中放tbody，tbody中只能放tr标签，不能放其他标签，但将组件放到tbody中，浏览器就会渲染出错，所以在tbody中必须放tr标签才能正常显示结果（虽然显示效果好像是一样的）。
1.3、解决方案：
- 可以通过使用vue中的
is语法来解决 - 原始标签的结构是什么样，依然按照规范写
- 需要在要使用组件的标签中使用is指向的组件来替换所对应的标签，这样既可以使用我们自己定义的组件，又符合HTML中的规范
修改的代码：
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
显示结果
1.4、注意：
- 除了table如此，还有如下的标签也需要注意：
- ul：在ul中使用的li（在Google中显示正常，其他浏览器可能有误）
- ol：在ol中使用的li
- select：在select中使用的option
