应用实例必须在调用了 .mount() 方法后才会渲染出来. 该方法接收一个 "容器" 参数, 可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串:
<div id="app"></div>
app.mount('#app')
应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount()
方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意,不同于其他资源注册方法,它的返回值是根组件实例而非应用实例。
在我们的 uniapp 项目中, 没有找到对 mount 的调用, 后面学 uniapp 指定教程应该会知道怎么回事.
这些好像都不太重要. 重点应该是 vue 的语法.
最基本的数据绑定形式是文本插值:
<span>Message: {{ msg }}</span>
双大括号标签会被替换为相应组件实例中 msg 属性的值. 同时每次 msg 属性更改时它也会同步更新. 没记错的话, 属性应该是在 data() 那块定义的. 如 companyName 属性:
export default {
data() {
return {
companyName: '',
}
},
}
Attribute 绑定
双大括号不能在 HTML attributes 中使用. 想要响应式地绑定一个 attribute, 应该使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
v-bind
指令指示 Vue 将元素的 id
attribute 与组件的 dynamicId
属性保持一致。如果绑定的值是 null
或者 undefined
,那么该 attribute 将会从渲染的元素上移除。
看到这去公司项目搜了下 v-bind, 以为没有呢.
其实是 v-bind 太常用, 一般都用简写语法:
<div :id="dynamicId"></div>
如果 attribute 的名称与绑定的 JavaScript 值的名称相同,那么可以进一步简化语法,省略 attribute 值, 比如组件有个属性就叫 id:
<!-- 与 :id="id" 相同 -->
<div :id></div>
<!-- 这也同样有效 -->
<div v-bind:id></div>
动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象:
const objectOfAttrs = {
id: 'container',
class: 'wrapper',
style: 'background-color:green'
}
通过不带参数的 v-bind, 可以将它们绑定到单个元素上:
<div v-bind="objectOfAttrs"></div>
今天就到这, 安卓项目出了个问题, 要去修改下, 不然还有一个小时下班.
现在是4点半哦. 这公司最好的点就是从来不加班了.