什么是vue


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 写 html,script写 js,style写样式

  • 一个template下只能有一个并列的 div

  • 数据要写在return 里面,如:

<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):

    //注册,对于自定义标签名称,不强制要求遵循W3C规则(小写,并且包含一个短杠),不过还是尽量遵循的比较好
    Vue.component('my-component',{
        template:'<div>A example component!</div>'
    })
    //使用
    <div id="example">
        <my-component></my-component>
    <div> 
    //创建根实例,要确保初始化根实例之前注册了组件
    new Vue({
        el:'#example'
    })

注册局部组件,通过组件实例选项注册,可以使组件尽在另一个实例/组件的作用域中可用:

var Child= {
    template:'<div>A example component!</div>'
}
new Vue({
    //...
    components:{
        //<my-component>将只在父模板可用
        'my-component':Child
    }
})

这种封装也适用于其他可注册的Vue功能,如指令。

父子组件通信


父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息。

  • props
    组件实例的作用域是孤立的。子组件的模板内不应该直接引用父组件的数据,可以使用props把数据传给子组件。

props是父组件用来传递数据的一个自定义的属性。子组件需要显式的用props选项声明的“prop”


Vue.component("child",{
    //声明props
    props:['myMessage'],//使用非字符串模板时,prop的名字形式会从camelCase转为kebab-case
    template:'<span>hello,{{message}}!</span>'
})
//使用
<child my-message="jake"></child>
//渲染
hello,jake!
  • 动态的props

可以用v-bind动态绑定props的值到父组件的数据中,当父组件的数据有变化时,子组件会随之变化。

<div> 
    <input v-model="parentMsg">
    //:my-message 是 v-bind:my-message的缩写
    <child :my-message="parentMsg"></child>
</div>    
  • prop验证

组件可以为props指定验证要求。prop是一个对象而不是字符串数组时,它包含验证要求。

  • 自定义事件

子组件传递数据给父组件,需要用到自定义事件:
使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

<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,可以通过文档学习。

服务端渲染SSR


先看看我们什么时候需要它:

  • SEO 搜索引擎优化

  • 客户端网络慢

  • 客户端运行在老的或者没有javascript引擎上,Vue只能运行在IE9+

  • 服务端渲染来改善一个少数的营销页面等的SEO,可以用预渲染替换。可以用prerender-spa-plugin插件来添加预渲染。


dada86
993 声望22 粉丝

多努力一点点。