day01
Vue 是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
使用Vue将helloworld 渲染到页面上
指令
-
本质就是自定义属性
-
Vue中指定都是以 v- 开头
v-cloak
-
防止页面加载时出现闪烁问题
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<
style type
=
"text/css"
>
/
*
1
、通过属性选择器 选择到 带有属性 v
-
cloak的标签 让他隐藏
*
/
[v
-
cloak]
{
/
*
元素隐藏
*
/
display
:
none;
}
<
/
style
>
<
body
>
<
div
id
=
"app"
>
<
!
-- 2、 让带有插值 语法的 添加 v-cloak 属性
在 数据渲染完场之后,v
-
cloak 属性会被自动去除,
v
-
cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签
也就是对应的标签会变为可见
-->
<
div
v
-
cloak
>
{
{
msg
}
}
<
/
div
>
<
/
div
>
<
script
type
=
"text/javascript"
src
=
"js/vue.js"
>
<
/
script
>
<
script
type
=
"text/javascript"
>
var vm
=
new
Vue
(
{
/
/
el 指定元素
id
是 app 的元素
el
:
'
#app',
/
/
data
里面存储的是数据
data
:
{
msg
:
'Hello Vue'
}
}
)
;
<
/
script
>
<
/
body
>
<
/
html
>
- v-text
-
v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
-
如果数据中有HTML标签会将html标签一并输出
-
注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
-
[AppleScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<
div
id
=
"app"
>
<
!
--
注意
:
在指令中不要写插值语法 直接写对应的变量名称
在 v
-
text
中 赋值的时候不要在写 插值语法
一般属性中不加
{
{
}
}
直接写 对应 的数据名
-->
<
p v
-
text
=
"msg"
>
<
/
p
>
<
p
>
<
!
-- Vue 中只有在标签的 内容中 才用插值语法 -->
{
{
msg
}
}
<
/
p
>
<
/
div
>
<
script
>
new
Vue
(
{
el
:
'
#app',
data
:
{
msg
:
'Hello Vue.js'
}
}
)
;
<
/
script
>
-