Vue.js快速⼊门+项⽬实战（源码）
Vue.js电影⽹站项⽬ github 链接（如果觉得有⽤记得start哦~）:
⽬录
前⾔
开发模式对⽐
MVC模式（JavaEE中的SSH框架，ASP.NET中的ASP.NET MVC框架）
MVP模式（ASP.NET中的Web Forms）
MVVM模式（Vue.js，WPF，AngularJS）
安装
1.vue.js
下载js⽂件，<script>标签引⼊，开发环境使⽤.js版本⽽不是.min.js
不下载直接⽤CDN，⼩型系统常⽤。BootCDN：
不下载直接⽤npm，构建⼤型应⽤时推荐使⽤
2.vue-devtools
下载地址：，readme->Get the Chrome Extension / (beta channel)
注：由于使⽤了ES5，故vue.js不⽀持IE8及其以下版本
说明：vus.js提供了⼀个数据的双向绑定功能，当动态更新message中的值时，并不需要刷新⽹页或更新节点，此节点的值会随着JavaScript代码的变动⽽改变
Vue.js
1.Vue.js主要特性
1）组件
组件是HTML元素的扩展，可⾃定义其数据与⾏为。例如通过⼀个bind操作将JS中的内容绑定在div标签内部：
<body>
<div id="app">
javascript的特性<p> {{ message }} </p>
</div>
<script>
var app = new Vue({
el: '#app',
data:{
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>
注册全局组件：
<div id="app">
<my-component></my-component>
</div>
<script>
Vueponent('my-component',{
template: '<div>Hello Vue!</div>'
})
new Vue({
el: '#app'
})
</script>
2）模板
vue.js使⽤基于HTML的模板语法，允许开发者将DOM元素与底层vue.js实例中的数据相绑定。
3）响应式设计
响应式⽹络设计是为了给移动设备提供更好的体验，整合从桌⾯到⼿机的各种屏幕尺⼨和分辨率，使⽹页适应不同分辨率的屏幕。响应式界⾯的四个层次：
同⼀页⾯在不同⼤⼩和⽐例上看起来都应该是舒适的；
同⼀页⾯在不同分辨率上看起来都应该是合理的；
同⼀页⾯在不同操作⽅式（如⿏标和触屏）下，体验应该是统⼀的；
同⼀页⾯在不同类型的设备（⼿机、平板、电脑）上，交互⽅式应该是符合习惯的。
4）过渡效果
vue.js的过渡效果可以让我们的页⾯元素在出现和消失时实现过渡。vue.js在插⼊、更新或移除DOM时，提供了多种⽅式的应⽤过渡效果，包括：
在CSS过渡和动画中⾃动应⽤CSS
配合使⽤第三⽅CSS动画库，如Animate.css
在过渡钩⼦函数中使⽤JavaScript之间操作DOM
配合使⽤第三⽅JavaScript动画库，如Velocity.js
vue.js提供了transition的封装组件，在下列情形中可以给任何元素和组件添加entering/leaving过渡：
条件渲染（使⽤v-if）
条件展⽰（使⽤v-show）
动态组件
组件根节点
简单⽽⾔就是，你可以使⽤vue的<transition></transition>组件，结合css的动画(animation)，过渡(transition)，或者javascript操作DOM 来让你的元素或者组件动起来。⽽在引⽤css和javascript中，你可以⾃⼰写，也可以利⽤现成的css或者javascript的第三⽅库。
页⾯交互举例，当单击按钮后，hello Vue会渐变地消失，再次单击后⼜会渐变地显⽰：
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
opacity: 0
}
</style>
<div id="app">
<button v-on:click="show = !show">
click
</button>
<transition name="fade">
<p v-if="show">hello Vue</p>
</transition>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
5）单⽂件组件
为了更好适应复杂的项⽬，vue.js⽀持以.vue为扩展名的⽂件来定义⼀个完整组件，⽤以替代使⽤Vueponent注册组件的⽅式。
2.Vue.js实例
1）构造器
对于Vue.js项⽬来说，每个应⽤的起步都需要使⽤Vue.js的构造函数创建⼀个根实例，如下：
// 建⽴Vue实例
var vm = new Vue({
// 选项
})
2）实例的属性和⽅法
每个Vue.js实例在被创建之前都要经过⼀系列的初始化过程，在初始化过程中加⼊⼀些data属性，即表⽰此实例的⼀些响应事件或数据属性等，如：
var data = { a:1 }
var vm = new Vue({
el: "#example",
data: data
})
vm.$data === data;    // true
vm.$watch('a', function(newValue, oldValue){
// 这个回调将在 vm.a 改变后调⽤
})
3）⽣命周期、钩⼦函数
钩⼦函数主要对于某个实例事件发⽣后需要响应已经预设好的代码。钩⼦的this指向调⽤它的Vue.js实例
3.Vue.js路由
通过对不同路由路径的定义，可以将Vue.js中可供访问的路径标明。⼀般采⽤⼀个路径对应⼀个功能的形式来定义页⾯
1）安装vue-router（提供了Vue.js的路由控制和管理）
2）动态路由匹配
动态路由匹配经常需要把某种模式匹配到的所有路由全都映射到同⼀个组件上。例如，所有ID不同的⽤户都要使⽤User组件来渲染：
export default new Router({
routes:[
{
path: '/user/:id',
component: User
}
]
})
⼀个路径的定义参数使⽤冒号进⾏连接，当匹配到⼀个路由时，参数值会被设置到 this.$route.params，可以在每个组件中使⽤3）嵌套路由
export default new Router({
routes:[
{
path: '/user/:id',
component: User,
children: [
{
path: 'vip',
component: VIP
}
]
}
]
})
4）编程式导航
<router-link to="...">
⽀持⽤户在具有路由功能的应⽤中（单击）导航，通过to属性指定⽬标地址，默认渲染成<a>标签
router.push(location, onComplete?, onAbort?)
这个⽅法会向history栈添加⼀个新的记录，当点击“后退”按钮时，则回到之前的URL
router.push('home')    // 参数：字符串路径
router.push({ path: 'home' })    // 参数：对象
router.push({ name: 'user', params: { userId: 123 }})    // 参数：命名的路由
router.push({ path: 'register', query: { plan: 'private'}})    // 带查询参数：/register?plan=private
router.push({ path: 'user', params: { userId } })    // 如果提供了path参数，params传递的参数会被忽略：/user
此⽅法和router.push()很像，唯⼀不同的是，它不会向history添加新纪录，⽽是替换掉当前的history记录<router-link to="..." replace>
<(n)
n是⼀个整数，表⽰在history记录中向前或后退多少步，类似(n)
<(1)    // 在浏览器记录中前进⼀步，等同于 history.forward()
<(-1)  // 在浏览器记录中后退⼀步，等同于 history.back()
<(100)  // 如果记录不够⽤，则⾃动失效
5）命名视图
⼀个⼯程可能需要同时（同级）展⽰多个视图，页⾯不复杂时，可以⽤视图的别名
<router-view class="view one"></router-view>    // 未指定名称，为默认组件
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
6）重定向和别名
重定向
const router = new VueRouter({
routes: [
{ path: "/a", redirect: "/b" }
]
})
const router = new VueRouter({
routes: [
{ path: "/a", redirect: { name: 'foo' } }
]
})
// 动态返回重定向⽬标
const router = new VueRouter({
routes: [
{ path: "/a", redirect: to => {
// return 重定向的字符串路径/路径对象
}}
]
})
别名

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。