资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Vue2.0 学习笔记

Vue2.0 学习笔记

cgh1999520 / 2846人阅读

摘要：父子组件通信父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。是一个对象而不是字符串数组时，它包含验证要求。状态管理由于多个状态分散的跨越在许多组件和交互间，大型应用的复杂度也随之增长。提供了，可以通过文档学习。

什么是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 里面,如:
组件

组件是什么？
组件可以扩展html元素，封装可以重用的代码。Vue.js的编译器为它添加特殊功能。

使用组件

注册全局组件，使用：Vue.component(tagName,options)：

    //注册，对于自定义标签名称，不强制要求遵循W3C规则（小写，并且包含一个短杠），不过还是尽量遵循的比较好
    Vue.component("my-component",{
        template:"
A example component!
"
    })
    //使用
    

        
    
 
    //创建根实例，要确保初始化根实例之前注册了组件
    new Vue({
        el:"#example"
    })

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

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

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

父子组件通信

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

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

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

Vue.component("child",{
    //声明props
    props:["myMessage"],//使用非字符串模板时，prop的名字形式会从camelCase转为kebab-case
    template:"hello,{{message}}!"
})
//使用

//渲染
hello,jake!

动态的props

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

 
    
    //:my-message 是 v-bind:my-message的缩写

prop验证

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

自定义事件

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


  
{{ total }}

  
  



Vue.component("button-counter",{
    template:"",
    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: "
Page not found
" }
const Home = { template: "
home page
" }
const About = { template: "
about page
" }
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插件来添加预渲染。

超融合服务器 云服务器 vue2.0 cdn 学习笔记 学习笔记一 基础学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86681.html

相关文章

  • Vue 笔记三：Vue2.0与1.0的区别

    摘要：升级的区别与的断层式升级不同，延续了自己的风格。在命名方式和上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人项目的一些经验之谈，并非系统性的阐述。总目录前端经验收集器转载自个人建了前端学习群，旨在一起学习前端。 升级的区别 与angular的断层式升级不同，vue延续了自己的风格。在命名方式和API上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人...

    Big_fat_cat 评论0 收藏0

  • (原创)vue 学习笔记

    摘要：菜鸟教程这是一个属性其值是字符串菜鸟教程同上这是一个属性其值是字符串用于定义的函数，可以通过来返回函数值。它们都有前缀，以便与用户定义的属性区分开来。 开篇语 我最近学习了js,取得进步,现在学习vue.js.建议新手学习,请不要用npm的方式(vue-cli,vue脚手架),太复杂了. 请直接下载vue.js文件本地引入,就上手学习吧参照菜鸟教程网站的vue.js教程http://...

    layman 评论0 收藏0

  • vue2.0学习笔记（事件处理）

    摘要：请记住，会告诉浏览器你不想阻止事件的默认行为。而单单释放也不会触发事件。修饰符修饰符允许你控制由精确的系统修饰符组合触发的事件。当一个被销毁时，所有的事件处理器都会自动被删除。 1、监听事件 用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。 Add 1 The button above has been clicked {{ counte...

    bovenson 评论0 收藏0

  • vue2.0学习笔记（表单输入绑定）

    摘要：复选框当选中时当没有选中时这里的和特性并不会影响输入控件的特性，因为浏览器在提交表单时并不会包含未被选中的复选框。 1、基础用法 v-model指令可以实现表单元素和Model中数据的双向数据绑定。只能运用在表单元素中（input、radio、text、address、email、select、checkbox、textarea） 可以用 v-model 指令在表单 、 及 元素上...

    Seay 评论0 收藏0

  • vue2.0学习笔记（组件注册）

    摘要：组件名在注册一个组件的时候，我们始终需要给它一个名字。局部注册全局注册往往是不够理想的。基础组件的自动化全局注册可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。记住全局注册的行为必须在根实例通过创建之前发生。 1、组件名 在注册一个组件的时候，我们始终需要给它一个名字。 Vue.component(my-component-name, { /* ... */ }) ...

    silvertheo 评论0 收藏0

发表评论

登陆后可评论

0条评论

cgh1999520

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<