el表达式的语法_vue基础语法

vue基础语法

#

基本安装

#

直接用引入

#

开发大型应用

• vue-cli

# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 webpack 模板的新项目$ vue init webpack my-project# 安装依赖，走你$ cd my-project$ npm install$ npm run dev

#

绑定信息

• Mustache(双大括号包裹)------>{{}}
• v-html
• v-text

三种的区别:

//插值表达式可以在文字的任意部分插入，不会覆盖原来的内容

我依然存在:{{msg}}

//v-text中的文字会覆盖标签原来的内容

我会被覆盖

//v-html//就是可以解析html代码咯

#

v-cloak

解决插值表达式闪烁问题

• 浏览器会先解析原本的内容，当网络请求不好的时候插值表达式还没有被vue解析。
• 甚至刷新快一点都会暴露

{{msg}}

//在页面中会直接显示 {{msg}}

• 解决办法
• 可以给元素加上v-cloak指令，配合css样式来解决闪烁问题

{{msg}}

原理： 在vue.js加载完毕之前，由于元素有v-cloak指令的存在，css样式生效，将元素隐藏起来，

当vue.js加载完毕，会自动将所有元素上的v-cloak指令移除，那么css样式失效，元素就展示出来。

但是这个时候插值表达式已经被解析完毕了！

#

绑定属性

v-bind:id

所有属性都通过v-bind绑定

简写 ： :+属性名

v-bind='class' ==> :class

就把带有冒号的当做是动态绑定的属性