邂逅vue
简单认识Vuejs
◼Vue (读音 /vjuː/,类似于 view),不要读错。
◼Vue是一个渐进式的框架,什么是渐进式的呢?
◼渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验。
◼或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。
◼比如Core+Vue-router+Vuex,也可以满足你各种各样的需求。
◼Vue有很多特点和Web开发中常见的高级功能
◼解耦视图和数据
◼可复用的组件
◼前端路由技术
◼状态管理
◼虚拟DOM
◼这些特点,你不需要一个个去记住,我们在后面的学习和开发中都会慢慢体会到的,一些技术点我也会在后面进行
讲解。
◼学习Vuejs的前提?
◼从零学习Vue开发,并不需要你具备其他类似于Angular、React,甚至是jQuery的经验。
◼但是你需要具备一定的HTML、CSS、JavaScript基础。
Vue.js安装
◼使用一个框架,我们第一步要做什么呢?安装下载它
◼ 安装Vue的方式有很多:
◼方式一:直接CDN引入
◼你可以选择引入开发环境版本还是生产环境版本
◼ 方式二:下载和引入
◼ 方式三:NPM安装
◼ 后续通过webpack和CLI的使用,我们使用该方式。
Hello Vuejs
◼ 我们来做我们的第一个Vue程序,体验一下Vue的响应式
◼ 代码做了什么事情?
◼ 我们来阅读JavaScript代码,会发现创建了一个Vue对象。
◼ 创建Vue对象的时候,传入了一些options:{}
◼ {}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元
素上,很明显,我们这里是挂载到了id为app的元素上
◼ {}中包含了data属性:该属性中通常会存储一些数据
◼ 这些数据可以是我们直接定义出来的,比如像上面这样。
◼ 也可能是来自网络,从服务器加载的。
◼ 浏览器执行代码的流程:
◼ 执行到10~13行代码显然出对应的HTML
◼ 执行第16行代码创建Vue对象,并且对原HTML进行解析和修改。
◼ 并且,目前我们的代码是可以做到响应式的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>hello word</title>
</head>
<body>
<div id="app">file:///E:/VUE/hello.html
<h1>{{msg}}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
msg: "hello Vue.js"
}
})
</script>
</html>
Vue列表显示
◼ 现在,我们来展示一个更加复杂的数据:数据列表。
◼ 比如我们现在从服务器请求过来一个列表
◼ 希望展示到HTML中。
◼ HTML代码中,使用v-for指令
◼ 该指令我们后面会详细讲解,这里先学会使用。
◼ 是不是变得So Easy,我们再也不需要在JavaScript代码中完成
DOM的拼接相关操作了
◼ 而且,更重要的是,它还是响应式的。
◼ 也就是说,当我们数组中的数据发生改变时,界面会自
动改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>邂逅vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in movies">
{{item}}
</li>
</ul>
</div>
</body>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
movies:['cf','qq','dnf']
}
})
</script>
</html>
计数器
◼ 现在,我们来实现一个小的计数器
◼ 点击 + 计数器+1
◼ 点击 - 计数器 -1 ◼ 这里,我们又要使用新的指令和属性了
◼ 新的属性:methods,该属性用于在Vue对象中定义方
法(函数)。
◼ 新的指令:@click, 该指令用于监听某个元素的点击事
件,并且需要指定当发生点击时,执行的方法(方法通
常是methods中定义的方法) ◼ 你可能会疑惑?
◼ 这些@click是什么东西?
◼ Vue对象中又是定义el/data/methods,到底都有哪些
东西可以定义,以及它们的作用是什么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
<h2>当前计数:{{counter}}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</body>
<script src="vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
counter :0
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
}
}
})
</script>
</html>
Vue中的MVVM
◼ View层:视图层
➢ 在我们前端开发中,通常就是DOM层。
➢ 主要的作用是给用户展示各种信息。
◼ Model层:数据层
➢ 数据可能是我们固定的死数据,更多的是来自我们服务器,从网络上请求下来的数据。
➢ 在我们计数器的案例中,就是后面抽取出来的data,当然,里面的数据可能没有这么简
单。
◼ ViewModel层:视图模型层
➢ 视图模型层是View和Model沟通的桥梁。
➢ 一方面它实现了Data Binding,也就是数据绑定,将Model的改变实时的反应到View中 ➢ 另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、
touch等)时,可以监听到,并在需要的情况下改变对应的Data。
计数器的MVVM
◼ 计数器的MVVM
◼ 我们的计数器中就有严格的MVVM思想
◼ View依然是我们的DOM
◼ Model就是我们我们抽离出来的data
◼ ViewModel就是我们创建的Vue对象实例
◼ 它们之间如何工作呢?
◼ 首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
◼ 其次ViewModel通过DOM Listener来监听DOM事件,并且通过methods中的操作,来改变data中的数据。
创建Vue实例传入的options
◼你会发现,我们在创建Vue实例的时候,传入了一个对象options。 ◼这个options中可以包含哪些选项呢?
◼详细解析: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE
◼目前掌握这些选项:
◼el: ◼类型:string | HTMLElement
◼作用:决定之后Vue实例会管理哪一个DOM。 ◼data:
◼类型:Object | Function (组件当中data必须是一个函数)
◼作用:Vue实例对应的数据对象。
◼methods:
◼类型:{ [key: string]: Function }
◼作用:定义属于Vue的一些方法,可以在其他地方调用,也可以在指令中使用。