一、课程介绍
Vue.js致力于构建数据驱动的web应用开发框架，以简洁化，轻量级，数据驱动，模块友好等优势深受企业以及前端开发者的喜爱，成为前端开发人员必备的技能。
Vue3.0的出现，又带动周边生态的发展，奠定了vue在企业级开发的重要地位。
本课程以项目实战为驱动，以轻松幽默的评书演义，帮你打开通往Vue.js的任督二脉，并帮助你迅速从vue2过渡到vue3, 让你迅速成为一个优秀的Vue.js开发人员。
二、课程需知
我们的课程面向的同学是：需要有网页开发基础，熟悉HTML/CSS/JavaScript等前端开发技术，初步掌握JSON，闭包，AJAX…等JavaScript技术，在进阶阶段的课程中会使用ES6的一些语法，因此事先掌握一些ES6的知识也是有必要的。
三、内容编排
本课程分为四大部分讲解了运用Vue.js 进行项目实战开发。内容包括：
?1. 沙漠风暴
?初识vue.js
?模板语法
?计算属性
?class与style绑定
?条件渲染
?列表渲染
?fetch&axios
?事件处理器
?表单控件
?组件化开发
?过渡动画效果
?自定义指令
?单文件组件
?2. 联盟力量
?路由vue-router
?better-scroll
?组件库vant
?Vuex
?3. 砺剑行动
?git管理
?Nginx以及发布
?4. 优化战略
?Vue3 composition Api
?Vue3+vue router
?Vue3+vuex
Vue : 有了我大家就不用手动操作dom了
juqery:吐血 卒
之前后端传参 前端需要不断创造各种dom结点
让一个hello world 级别的Vue跑起来
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#"/>
<meta charset="utf-8" />
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="box">{{10+20}}</div>
<script>
new Vue({
el:"#box"
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="#"/>
<meta charset="utf-8" />
<title></title>
<script src="lib/vue.js"></script>
</head>
<body>
<div id="box">{{10+20}}
{{
myname
}}</div>
<script>
new Vue({
el:"#box",
data:{
myname:"鸟鸟"//状态
}
})
</script>
Vue在改数据的时候不需要在dom结点里面改
<div id="box">{{10+20}}
{{
myname
}}</div>
只需要在状态里修改
data:{
myname:"鸟鸟"//状态
}
定义一个全局变量vm
var vm =new Vue({
el:"#box",
data:{
myname:"鸟鸟"//状态
}
}
通过全局变量vm 查找并修改 myname的 值 非常方便
