官网:
https://cn.vuejs.org/ 属性 ---- 变量 ---- 模型 方法 ---- 函数
1.介绍
1.渐进式 JavaScript 框架:主张最少。
2.优点:易用 灵活 高效 指令系统 SPA(单页面应用) MVVM
多页面应用:1个url 对应一个html页面,多个url对应多个html
单页面应用:多个url对应1个html页面
3.兼容:Vue
不支持 IE8 及以下版本。
2.体验vue
大量的数据增删改查的操作 我们就要采用vue
如果你的项目有大量的DOM节点操作或者动画(show hide slideDown slideUp….) ,建议使用jq
3.学习
1.el 挂载点
1.el可以使用css的所有选择器,但是建议使用id(如果有两个div,然后el:div, 这样只会挂载到第一个div上) 只能挂载到一个节点上
2.不要将vue挂载到html或者body 回出现
这个错误提示
![](https://i-blog.csdnimg.cn/blog_migrate/83b150419c71933d0b2ec17d66effbaa.png)
3.一个new vue中只能有一个el
2.data 属性
new Vue({
data:{
a:10
}
})
3.methods 方法
new Vue({
methods:{
show:function(){},
hide:function(){},
}
})
4.数据绑定
非表单元素:
div span ul li h1-h6 p ….
1.{{}} 模板语法 : 方便好用
但是不能解析标签,有可能会出现首屏闪屏问题。
双大括号里面的按照js解析输出,外面的按照原样输出、
闪屏就是当用户网络慢,然后加载不出vue.js的时候,页面上会出现很多的双大括号,但是有了网之后,会从双大括号变成正常的界面显示
<body>
<div id="app">
<h1>你好,{{name}}</h1> //还可以写成
<h1>{{“你好," + name}}</h1>
</div>
</body>
<script>
new Vue({ //Vue首字母必须大写
el:"#app", //以div为挂载点 #对应id,,点对应class,如果只是标签,则直接el:"div"
data:{
name:"王赛"
},
methods:{
show:function(){},
hide:function(){},
}
})
</script>
页面显示:你好,王赛
2.v-html : 能解析标签
v-html里面的按照js解析输出,必须按照js的语法输出
当用户网络慢,然后加载不出vue.js的时候,页面会出现空白,但是有了网之后,会从空白变成正常的界面显示
<body>
<div id="app">
<h1 v-html="name"></h1>
<h2 v-html="'你好,'+ name"></h2>
</div>
</body>
<script>
new Vue({ //Vue首字母必须大写
el:"#app", //以div为挂载点 #对应id,,点对应class,如果只是标签,则直接el:"div"
data:{
name:"王赛"
},
methods:{
show:function(){},
hide:function(){},
}
})
</script>
页面显示: 王赛
你好,王赛
3.v-text : 不方便,
不能解析标签。可以解决首屏出现闪屏问题
v-text里面的按照js解析输出,必须按照js的语法输出
<body>
<div id="app">
<h1 v-text="name"></h1>
<h2 v-text="'你好,'+ name"></h2>
</div>
</body>
<script>
new Vue({ //Vue首字母必须大写
el:"#app", //以div为挂载点 #对应id,,点对应class,如果只是标签,则直接el:"div"
data:{
name:"王赛"
},
methods:{
show:function(){},
hide:function(){},
}
})
</script>
表单元素:
Input textarea select-option ...
v-model 数据的双向绑定,只能绑定一个变量
<body>
//视图
<div>
<span>{{name}}</span>
<input type="text" v-model="name">
</div>
<script>
new Vue({
el:"div",
//模型
data:{
name:"王赛"
}
})
</script>
</body>
当页面显示完之后,如果在input的输入框内容重新输入了内容,那么span里面的内容也会跟着修改。 因为input的name属性被修改,那么根据数据的双向绑定原则,那么模型中data的name也会被修改,那么所有和data有关的属性都会被修改,除非重新刷新页面,不然初始值不会被改回来
5.MVVM模式(需要记忆)
M-model 模型 类似于机顶盒,机顶盒里有很多的数据,
V-view 视图 类似于电视机
VM-viewModel 视图模型 (控制器) 类似于遥控器
模型通过控制器决定了视图,视图可以通过控制器修改模型,视图模型是模型和视图之前的桥梁。 VM是vue自动生成的
适用:大量的数据增删改查的操作
在vue中也是先定义,后使用