vue学习笔记

vue对比jquery

vue：mvvm 数据驱动影响视图适用于复杂数据
jquery：mvc 视图塞入数据适用于复杂视图动效

生命周期

以下都是钩子函数

beforeCreate（创建前）
created（创建后）
beforeMount (载入前)
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）

计算属性

computed：计算属性
区别与methods：
性能相比methods要高因为有缓存只有在相关值发生改变时才会触发在第一次渲染页面也会主动触发

计算属性的数据源未发生变化则不会触发响应的计算属性
属性区分于方法

  
    原始字符串: {{ message }}
    计算后反转字符串: {{ reversedMessage }}

计算属性中默认存在getter方法我们可以手动添加setter方法:

  
    {{ site }}

过滤器

vue中可以自定义过滤器被用作常见地文本格式化


{{ message | capitalize }}


    
    {{ message | capitalize }}

监听属性

watch：响应数据变化


    
    千米 :  米 :

样式绑定

单样式绑定：

多样式绑定：

组件

组件是整个vue知识体系中最重要的一个模块
组件的作用是：复用
前端路由相对于传统路由请求少节省资源
mode:history //不使用html5 实现前进和后退默认设置
关于组件的引用除了直接引用自定义标签 is标签也可以引用组件到指定的位置,动态绑定组件

全局组件

局部组件

区分于全局组件

template

template 模版用来承载dom树常在组件中使用

props

自定义组件属性：通过props申明属性可以通过v-bind动态绑定自定义属性

动态props

通过v-bind实现

组件间交互

父组件往子组件传入数据使用props 反过来则用emit

父传子：
子组件props定义属性子组件标签引用v-bind将父组件参数与子组件属性绑定

子传父：
父组件定义method：fv_fuc 接受参数arg
子组件 this.$.emit(,)
子组件标签引用 v-on：="fv_fuc"
流程：子组件的emit触发标签引用的fuc继而触发父组件的fv_fuc

  
      
        {{ counter }}

自定义指令

directive 定义指令名称
inserted 当绑定元素插入到dom中会触发


    页面载入时，input 元素自动获取焦点：

vue.directive定义全局指令 directives: {}的方式定义局部指令这点和component(组件)相似

  
    页面载入时，input 元素自动获取焦点：

directive可以和钩子函数配合使用不需要钩子函数也可以简写第二个参数是function，默认的第一个参数是el

  Vue.directive('runoob', {
      // 绑定bind的钩子函数
      bind: function(el, binding, vnode) {
        var s = JSON.stringify
        el.innerHTML =
          'name: ' + s(binding.name) + '
' +
          'value: ' + s(binding.value) + '
' +
          'expression: ' + s(binding.expression) + '
' +
          'argument: ' + s(binding.arg) + '
' +
          'modifiers: ' + s(binding.modifiers) + '
' +
          'vnode keys: ' + Object.keys(vnode).join(', ')
      }
    })
    new Vue({
      el: '#app',
      data: {
        message: '菜鸟教程!'
      }
    })

路由

路由：
需要下载 vue_router库然后vue.use(VRouter)
使用步骤：
1.定义路由组件
2.定义路由:映射组件
3.通过routes配置新建router实例
4.通过router参数注入路由并且挂载根实例

页面跳转 rooter-link



  
    Hello App!
    
      
      
      
      Go to Foo
      Go to Bar

路由参数

在映射表里设置如：path：'/apple/:color'

ex6 语法

import 配合export default使用以page的形式导出组件这都是ex6的语法
另外一种写法：区别与上一种写法需要 {} 的使用

let com={ //let 在当前作用域下声明一个变量,不会泄漏到外部  区别与var const：常量
}
export { com } //注意{}的使用
引用的时候：
import { com } from ...

脚手架

vue-cli 官方脚手架工具

优势

成熟的vue项目架构设计
本地测试服务器热加载服务器热更新
集成打包上线方案 webpack

系统要求：
node>4.0

指令

vue list:查看模版方案
vue init webpack demo 利用脚手架初始化项目

项目结构

利用vue_lic生成的项目结构：
build: 项目构建(webpack)相关代码
config：配置目录包括端口号等初学可以使用默认的
node_modules :npm 加载的项目依赖模块
src：源码包含几个目录及文件：

assets :放置一些图片 logo
components :放置一个组件文件可以不使用
App.vue : 项目入口文件可以直接把组件写在这里取代 components目录
main.js :项目的核心文件

.****文件配置文件包括语法配置 git配置
static：静态文件资源目录如图片字体等
package.json :npm需要的一套配置文件
index.html: 首页文件入口可以添加一些meta信息或者统计代码

npm run build：此指令用于生成部署用的文件文件会存在dist中

创建项目

步骤：

vue init webpack Vue-Project
根据提示配置项目信息
cd 到项目下执行npm install：安装相关依赖此处需要翻墙
npm run dev :运行项目

有时候浏览器打不开页面可能是端口被占用
更换端口：

更换端口.png

mac下查询端口占用情况例如查看8081端口：
lsof -i tcp:8081

细节杂记

字符串反转：

message.split('').reverse().join('')

"-" 命名的属性引用时必须使用单引号

vue中可以绑定对象也可以绑定对象的计算属性
例子：

内联样式的两种写法：

在html中直接{}
在css中定义class 然后html中引用

关于导出组件的data中采用函数return data的方式形成自己的实例防止复用冲突

vue2.0 如果需要js的完全编程能力必须使用render渲染外部引入的app组件 区别与template更接近与编译器

template 写 html，script写 js，style写样式，一个template只能有一个div

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来,例如：

  
    site : {{site}}
    url : {{url}}
    Alexa : {{alexa}}