学习内容: Vue全家桶(vue/vue-router/vuex/axios)
1,MVVM
学习vue之前 首先了解什么是MVVM架构模式,MVVM,是一种架构模式,也有人叫做设计模式。
M:model数据类型。V:view视图(页面) VM:ViewModel 视图模型 MVVM通过‘数据双向绑定’让数据自动滴双向同步。
V(修改视图)=> M(数据自动同步) M(修改数据)=> (视图自动同步)。
Vue就是一个MVVM的框架,在vue中,通过数据驱动视图,不建议想着怎么操作dom元素,而是想着如何操作数据!!
2,vue初体验
安装 yarn add vue 或 npm install vue
<div id="app">
<!-- 3.可以通过{
{
}}显示vue中的数据 -->
<h1>{
{
msg}}</h1>
</div>
<!-- 1. 引入vue.js -->
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
// 2. 创建vue实例,需要指定el和data属性
let vm = new Vue({
// 指定vue监管的视图区域,只要id为app的div内部才会受vue的管理
el: '#app',
// 提供了vue中使用的数据
data: {
msg: 'hello vue'
}
})
</script>
使用 插值表达式:{ {}} 也叫Mustache语法。
作用:使用data中的数据渲染模板。
注意点:使用的数据在data总要存在,且data中数据变化了,插值处的内容就会更新。
{ {}} 中只能出现JavaScript表达式,不能写js语句
<h1>Hello, {
{
msg }}.</h1>
<p>{
{
isOk ? 'yes': 'no' }}</p>
<p>{
{
1 + 2 }}</p>
<!-- !!!错误示范!!! -->
<h1 >{
{
if(){
} }}</h1>
<h1 title="{
{ err }}"></h1>
好了,今天先对vue有个初步的认知,下一节我们学习vue的指令!