认识vue
- Vue (读音 /vjuː/,类似于 view),不要读错。
- Vue是一个渐进式的框架,什么是渐进式的呢?
- 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。
- 或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
- 比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。
- Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
Vue的安装
- 方式一:直接cdn引入
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 方式二:下载引入(官网下载js文件)
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
方式三:NPM安装
- 待完善
vue使用
- 简单vue
<div id="myId">
<h2>{{message}}</h2>
<h3>{{name}}</h3>
</div>
<div>
{{message}}
<!-- 没有id-->
</div>
<script src="../js/vue.js"></script>
<script>
//let变量、const常量
//编程范式:声明式编程
const app = new Vue({
el:"#myId",//用于挂载要管理的元素
data:{//定义数据
message:"是你吗?",
name:"哈哈"
}
})
</script>
- 列表显示
<div id="myli">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue ({
el:"#myli",
data:{
message:"你很好",
movies:["海贼","大理石","没有我的日子"]
}
})
</script>
- 计数器
<div id="myid">
<h4>当前计数:{{counter}}</h4>
<button v-on:click="add">+</button>
<button @click="sub">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
let my = new Vue({
el:"#myid",
data:{
counter: 0
},
methods:{
add:function () {
console.log("被执行了");
this.counter++
},
sub:function () {
console.log("减法");
this.counter--
}
}
})
</script>
Vue中的MVVM
- View层:视图层
在我们前端开发中,通常就是DOM层。
主要的作用是给用户展示各种信息。 - Model层:数据层
数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
在我们计数器的案例中,就是后面抽取出来的obj,当然,里面的数据可能没有这么简单。 - VueModel层:视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中
另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。
计数器的MVVM
- 我们的计数器中就有严格的MVVM思想
View依然是我们的DOM
Model就是我们我们抽离出来的obj
ViewModel就是我们创建的Vue对象实例 - 它们之间如何工作呢?
首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
其次ViewModel通过DOM Listener来监听DOM事件,并且通过methods中的操作,来改变obj中的数据。 - 有了Vue帮助我们完成VueModel层的任务,在后续的开发,我们就可以专注于数据的处理,以及DOM的编写工作了。
创建Vue实例时候传入的对象options
我们在创建Vue实例的时候,传入了一个对象options。
这个options中可以包含哪些选项呢?
详细解析
目前掌握这些选项:
- el:
类型:string | HTMLElement
作用:决定之后Vue实例会管理哪一个DOM。 - data:
类型:Object | Function (组件当中data必须是一个函数)
作用:Vue实例对应的数据对象。 - methods:
类型:{ [key: string]: Function }
作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。