脚本宝典收集整理的这篇文章主要介绍了Vue2.0 学习笔记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
vue是一个前端框架,主要两个特点:数据绑定、组件化。
根据教程安装环境:node.js、npm、webpack、vue-cli
主要的命令行:
# 保证已安装node.js环境 全局安装 vue-cli(vue的脚手架)
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue inIT webpack my-PRoject
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev
相关的几个命令行:
# node版本
$ node -v
# 清缓存
$ npm cache clean -f
# 全局安装镜像
$ npm install -g nrm
# 可用的镜像资源
$ nrm ls
# 选用taobao的镜像(安装镜像之后,npm可以输入cnpm代替)
$ nrm use taobao
# 安装vue路由模块和网络请求模块
$ cnpm install vue-router vue-resource --save
# 工程打包
$ npm run build
sublime text 中安装Vue Syntax Highlight插件
一些小总结:
<template>
<div id="app">
<h1>{{msg}}</h1>
</div>
</template>
<script>
/*声明式渲染一个vue实例*/
new Vue({// 选项
el:"#app",
data () {
return {
msg:"hello vue.js!"
}
}
})
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
组件是什么?
组件可以扩展html元素,封装可以重用的代码。Vue.js的编译器为它添加特殊功能。
使用组件
注册全局组件,使用:Vue.COMponent(tagName,options):
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter',{
template:'<button v-on:click="increment">{{ counter }}</button>',
data:function () {
return {
counter:0
}
},
methods:{
increment: function(){
this.counter +=1
this.$emit('incrment')
}
}
})
new Vue({
el:'#counter-event-example',
data:{
total:0
},
methods:{
incrementTotal:function(){
this.total +=1
}
}
})
简单场景下,使用一个用的Vue实例作为中央事件的总线。
var bus = new Vue()
//触发组件A中的事件
bus.$emit('id-selected',1)
//在组件B创建的钩子中监听事件
bus.$on('id-selected',function(id){
//...
})
复杂情况下,应该考虑专门的状态管理模式。
可复用的组件应当定义一个清晰的公开接口,Vue组件的接口,来自三部分——props、events、slots:
props允许外部环境传递数据给组件。
events允许组件触发外部环境的副作用。
slots允许外部环境将额外的内容组合在组件中。
大多数的单页面应用,都推荐使用vue-router库
简单的路由不需要引入整个路由库。如:
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const About = { template: '<p>about page</p>' }
const routes = {
'/': Home,
'/about': About
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})
将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的,如果在作用域中 h
失去作用, 在应用中会触发报错。
由于多个状态分散的跨越在许多组件和交互间,大型应用的复杂度也随之增长。采用简单的Store模式:
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction (newValue) {//变更记录
this.debug && console.LOG('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction () {
this.debug && console.log('clearMessageAction triggered')
this.state.message = 'clearMessageAction triggered'
}
}
//实例/组件仍然可以拥有和管理自己的私有状态
var vmA = new Vue({
data: {
privatestate: {},
sharedstate: store.state
}
})
var vmB = new Vue({
data: {
privateState: {},
sharedState: store.state
}
组件不允许直接修改属于 store 实例的 state,而应执行 action 来分发 (dispatch) 事件通知 store 去改变,我们最终达成了 Flux 架构。这样约定的好处是,我们能够记录所有 store 中发生的 state 改变,同时实现能做到记录变更 (mutation) 、保存状态快照、历史回滚/时光旅行的先进的调试工具。Vue提供了vuex,可以通过文档学习。
先看看我们什么时候需要它:
SEO 搜索引擎优化
客户端网络慢
客户端运行在老的或者没有javascript引擎上,Vue只能运行在IE9+
服务端渲染来改善一个少数的营销页面等的SEO,可以用预渲染替换。可以用prerender-spa-plugin插件来添加预渲染。
以上是脚本宝典为你收集整理的Vue2.0 学习笔记全部内容,希望文章能够帮你解决Vue2.0 学习笔记所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。