Vue-day01
一.什么是Vue?
- Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
- vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合
- vue.js是前端的主流框架之一,和Angular,React一起,成为前端三大主流框架!
MVVM是什么?
- MVC 是后端的分层开发概念; MVVM是前端视图层的概念,主要关注于 视图层分离,也就是说:MVVM把前端的视图层,分为了 三部分 Model, View , VM ViewModel
- m model
- 数据层 Vue 中 数据层 都放在 data 里面
- v view 视图
- Vue 中 view 即 我们的HTML页面
- vm (view-model) 控制器 将数据和视图层建立联系
- vm 即 Vue 的实例 就是 vm
MVVM关系图解
Vue基础代码
- vm 即 Vue 的实例 就是 vm
<script src="js/vue.js"></script>
</head>
<body>
<!-- 将来vue的实例会控制这个元素中的内容 -->
<!-- vue实例所控制的元素区域就是我们的V -->
<div id="app">
<p>{
{
msg}}</p>
</div>
<script>
//创建一个Vue的实例,当我们导入包的时候,在浏览器的内存中就多了一个Vue构造函数
//注意:我们new出来的这个vm对象就是MVVM中的vm
var vm = new Vue({
el: '', //表示当前我们new的这个Vue实例,要控制页面上的哪个区域
//这里的data就是MVVM中的M,专门用来保存每个页面的数据的
data: {
msg: '欢迎学习Vue' //通过Vue提供的指令,很方便的就把数据渲染到页面上,程序员不在手动操作Dom元素了
} //data属性中存放的是el中要用到的数据
})
</script>
使用Vue将helloworld 渲染到页面上
二.什么是指令?常用的指令
- 本质就是自定义属性
- Vue中指定都是以 v- 开头
v-cloak
防止页面加载时出现闪烁问题
<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标签一并输出
- 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
<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>
v-html
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html
,永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
<div id="app">
<p v-html="html"></p> <!-- 输出:html标