vue样式

发表于 2018-04-29 | 分类于 VUE

vue样式绑定

class和style强化数组和对象

class对象语法

1	<div v-bind:class="{active:isActive,error:isError}" class="box"></div>

var vm = new Vue({
  el:'app',
  data:{
    isActive:true,
    isError:true
  }
});

1	<div class="box active error"></div>

可以通过强大的计算属性返回一个对象绑定 class

var vm = new Vue({
  data:{
    isActive:true,
    isError:true  
  },
  computed:{
    classObj:function () {
      return {
        active:this.isActive,
        error:this.isError
      }
    }
  }
})

class数组语法

1	<div v-bind:class="[{active:isActive},errorClass]"></div>

var vm = new Vue({
  data:{
    activeClass:'active',
    errorClass:'error'
  }
})

style对象语法

1	<div v-bind:style="styleObj"></div>

data:{
  styleObj:{
    color:'red',
    fontSize:'16px'
  }
}

style数组语法

1	<div v-bind:style=[styleObj,baseObj]></div>

vue表单控件

发表于 2018-04-29 | 分类于 VUE

基本用法

文本

<div id="app">
  <input type="text" v-model="msg">
  <p>{{msg}}</p>
</div>

var vw = new Vue({
  el:'#app',
  data:{
    msg:''
  },
});

复选框

绑定字符串表示 逻辑

1 2	<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label>

绑定数组表示 value

<div id="app">
  <input type="checkbox" v-model="checkName" value="input-1">
  <input type="checkbox" v-model="checkName" value="input-2">
  <input type="checkbox" v-model="checkName" value="input-3">
  <p>{{checkName}}</p>
</div>

var vw = new Vue({
  el:'#app',
  data:{
    checkName:[]
  },
});

单选

绑定是value

<div id="app">
  <label for="">one</label>
  <input type="radio" v-model="picker" value="one">
  <label for="">two</label>
  <input type="radio" v-model="picker" value="two">
  <p>{{picker}}</p>
</div>

var vw = new Vue({
  el:'#app',
  data:{
    picker:''
  },
});

绑定value

1	<input type="radio" v-model="pick" v-bind:value="a">

当选中时，value等于数值 vm.a

修饰符

.lazy 同步数据
.number 转为数字
.trim 去除空格

vue组件

发表于 2018-04-29 | 分类于 VUE

vue组件 vue

未完成

slot 作用域插槽
动态组件
杂项
自定义表单子组件通讯
prop验证

使用组件

全局注册和局部注册

<div id="app">
  <my-component></my-component>
  <app-component></app-component>
</div>

// 全局注册
Vue.component('my-component',{
  template:'<div>this is my component</div>'
});
var vm = new Vue({
  el:'#app',
  // 局部注册
  components:{
    'app-component':{
      template:'<div>this is app-component</div>'
    }
  }
});

dom解析限制

比如table、ul、ol、 select 限制包围的元素可以通过 is 来变通

<ul id="app">
  <li is="my-component"></li>
  <li is="app-component"></li>
</ul>

组件的data必须是函数

每个组件的作用域都是独立的

// 全局注册
Vue.component('my-component',{
  template:'<div>{{msg}}</div>',
  data:function () {
    return {
      msg: 'hello world vue'
    };
  }
});
var vm = new Vue({
  el:'#app',
  // 局部注册
  components:{
    'app-component':{
      template:'<div>{{msg}}</div>',
      data:function () {
        return {
          msg: 'hello world app'
        };
      }
    }
  }
});

父元素和子元素通讯

props 父到子
event 子到父

Prop

基本用法

<div id="app">
  <!--父模板传入数据  -->
  <my-component v-bind:child="child"></my-component>
</div>

Vue.component('my-component',{
  template:'<div>{{child +" "+msg}}</div>',
  data:function () {
    return {
      msg: 'hello world vue'
    };
  },
  // 声明输入接口
  // 这个接口可以调用父模板数据
  props:['child']
});
var vm = new Vue({
  el:'#app',
  data:{
    child:"this is parent message"
  }
});

父模板传入数据

字面量语法
传入一个字符串

1
2
3

<div id="app">
  <my-component child="child"></my-component>
</div>

动态语法
绑定一条JavaScript语句

1
2
3

<div id="app">
  <my-component v-bind:child="child"></my-component>
</div>

单向数据流

父模板流进子组件子组件不会传回给父模板
可以用data放置props的数据或者计算属性 computed

Vue.component('my-component',{
  template:'<div>{{childData}}</div>',
  props:['child'],
  data:function () {
    return {
      childData: this.child
    };
  }
});

自定义事件

<div id="app">
  <p>{{total}}</p>
  <!--父模板监听子组件的自定义事件  -->
  <my-component v-on:increment="incrementTotal"></my-component>
  <my-component v-on:increment="incrementTotal"></my-component>
</div>

Vue.component('my-component',{
  template:'<button v-on:click="increment">{{count}}</button>',
  data:function () {
    return {
      count:0
    };
  },
  methods:{
    increment:function () {
      this.count += 1;
      // 当子组件触发事件后 触发对应实例的自定义事件
      this.$emit('increment');
    }
  }
});
var vm = new Vue({
  el:'#app',
  data:{
    total:0
  },
  methods:{
    incrementTotal:function () {
      this.total += 1;
    }
  }
});

子组件和父模板作用域都是独立的，子组件通过自定义事件告诉父模板
父模板监听自定义事件，子组件完成事件后触发实例的自定义事件 this.$emit('increment')

slot分发内容

编译作用域

父模板编译的数据来自实例
子组件编译的数据来自自身的数据

单个slot

slot的定义备用内容父模板的中子组件的内容将会在子组件slot下编译

<div id="app">
  <my-component>
    <p>slot的内容</p>
    <p>slot的内容</p>
  </my-component>
</div>

Vue.component('my-component',{
  template:'<div><h2>子组件模板</h2><slot>没用内容显示我</slot></div>',
});
var vm = new Vue({
  el:'#app',
});

具名slot

<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容

<div id="app">
  <my-component>
    <h2 slot="header">这是头部内容</h2>
    <div>
      <p>这是主要内容</p>
      <p>这是主要内容</p>
      <p>这是主要内容</p>
    </div>
    <h2 slot="footer">这是底部内容</h2>
  </my-component>
</div>

Vue.component('my-component',{
  template: '\
  <div class="container">\
    <header>\
      <slot name="header"></slot>\
    </header>\
    <main>\
      <slot></slot>\
    </main>\
    <footer>\
      <slot name="footer"></slot>\
    </footer>\
  </div>\
  ',
});
var vm = new Vue({
  el:'#app',
});

vue循环判断

发表于 2018-04-29 | 分类于 VUE

条件渲染

v-if
v-else
v-else-if
<template></template> 条件渲染一组
key 声明这个元素是完全独立的
v-show 控制 display的值

列表循环

基本用法

<div id="app">
  <template v-for="(item, index) in items">
    <h4>中国四大名著</h4>
    <p>{{index}}-{{item.book}}</p>
  </template>
</div>

var vw = new Vue({
  el:'#app',
  data:{
    items:[
      {book:'西游记'},
      {book:'红楼梦'},
      {book:'水浒传'},
      {book:'三国志'},
    ]
  }
});

template 标签渲染多组元素

对象循环

<div id="app">
  <template v-for="(item,key,index) in object">
    <h4>中国四大名著</h4>
    <p>{{item}}-{{key}}-{{index}}</p>
  </template>
</div>

var vw = new Vue({
  el:'#app',
  data:{
    object:{
      book1:'西游记',
      book2:'红楼梦',
      book3:'水浒传',
      book4:'三国志',
    }
  }
});

key

使用循环 v-for 提供 key 需要用 v-bind 绑定

数组更新

变异方法
push() pop() shift() unshift() splice() sort() reverse()
重构数组
oldArray = oldArray.filter();

显示过滤/排序结果

可以通过 computed 来创建过滤或排序后的数组

1
2
3

<div id="app">
  <div v-for="item in evenNums">{{item}}</div>
</div>

var vw = new Vue({
  el:'#app',
  data:{
    nums:[1,2,3,4,5,6,7,8,9]
  },
  computed:{
    evenNums:function () {
      return this.nums.filter(function (num) {
        return num%2 ===0;
      });
    }
  }
});

webpack 学习笔记

发表于 2018-04-29 | 分类于 other

webpack 学习笔记

webpack 配置文件 webpack.config.js

require( ) 引入项目依赖
module.exports 模板输出
inport 模板导入
loader是将各种东西都可以打包成js模板

实例

//声明依赖
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    //基础配置 __dirname 项目根目录
    entry:  __dirname + "/app/main.js",//打包 入口文件
    output: {
        path: __dirname + "/build",//打包后 存放的目录名
        filename: "bundle.js"//打包后输出文件名
    },
    // loader配置
    module: {
      loaders: [
        {
            test: /\.json$/, //处理文件的扩展名的正则表达式 必须
            loader: "json-loader" //对应loader插件 必须
        },
        {
            test:/\.css$/,
            loader:'style-loader!css-loader'
        }
      ]
    },
    // 插件使用 new 一个这个插件的实例，并传入相关的参数
    plugins: [
      new HtmlWebpackPlugin({
        template: __dirname + "/app/index.tmpl.html"
      })
    ],

};

http协议

发表于 2018-04-29 | 分类于 other

http协议

概述

http客户端(游览器)发起请求,创建端口
http服务器在端口监听客户端请求
http服务器向客户端返回状态码和内容

打开首页

chrome搜索自身的DNS缓存 => 系统DNS缓存 => 本地host => 请求(问)运营商(电信)
电信服务器查看自身DNS缓存 => 电信迭代请求DNS => 最终找到首页的ip => 返回给系统并缓存起来 => 系统返回chrome
chrome 获得域名和对应的ip地址后,发起HTTP “三次握手”
chrome和服务器连接完后，游览器就可以向服务器发出请求 get/post
服务器接受到这个请求，根据url参数，经过后端处理，把对应的数据返回给游览器，如请求首页，后端会把整个index.html返回给游览器
游览器在解析和渲染index.html时，遇到js、css、图片资源等也会发出http请求
游览器根据拿到的资源渲染，最终把对应的页面展现给用户

请求响应

请求 request
响应 response
请求和响应都会发出http头和正文信息

`request`

http头 请求方法(get/post)、类型、时间
正文信息 通常为用户提交的表单数据

`response`

http头 http状态码、类型、时间
正文信息 资源如 html js 图片 css

`http状态码`

200-299 用于表示请求成功
200 成功
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
400-499 用于指出客户端的错误
400 请求出现语法错误
404 无法找到指定位置的资源。这也是一个常用的应答。
500-599 用于支持服务器错误

package.json学习笔记

发表于 2018-04-29 | 分类于 other

package.json学习笔记

{
  "name": "demo",
  "version": "1.0.0", //版本
  "description": "this is demo",
  "main": "index.js",
  //npm run 命令
  "scripts": {
    "start": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "liangjiayu.github.com"
  },
  "keywords": [
    "demo"
  ],
  "author": "ljy",
  "license": "ISC",
  //项目运行依赖
  // ^不改变大版本
  // 大版本 次版本 小版本
  // ~不改变小版本
  "dependencies": {
    "autoprefixer": "^6.7.7",
    "css-loader": "^0.27.3",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "postcss-loader": "^1.3.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.2"
  },
  //项目开发依赖
  "devDependencies": {
    "browserify": "~13.0.0",
    "karma-browserify": "~5.0.1"
  }
}

npm学习笔记

npm install (packageName) [-g 全局]
npm init 初始化项目
npm update(packageName) 更新模板
npm uninstall 卸载模板
npm instal 安装 package.json 对应的依赖
npm run *** 运行 package.json 对应的脚本指令

node学习笔记

发表于 2018-04-29 | 分类于 node

node学习笔记

简介

异步操作

JavaScript是单线程运行 node采用大量的异步操作
异步就像发短信,发完短信要等别人回复我,回复后我做出响应,等待中我可以继续打电话(同步)
回调函数默认参数一为错误对象

全局变量和方法

global 全局环境
console 打印
process 当前进程
setTimeout() clearTimeout() setInterval() clearInterval()
require() 加载模块
Buffer() 操作二进制数据

模块化

require() 加载模块默认路径扩展名 .js

核心模块

http 提供HTTP服务器功能
url 解析URL
fs 与文件系统交互
querystring 解析URL的查询字符串
child_process 新建子进程
util 提供一系列实用小工具
path 处理文件路径
crypto 提供加密和解密功能，基本上是对OpenSSL的包装

自定义模板

输出模块再通过require使用
module.exports = foo;
exports.foo = foo;

异常处理

回调函数

回调函数第一个参数默认为错误对象

fs.readFile('/foo.txt', function(err, data) {
  if (err !== null) throw err;
  console.log(data);
});

'/foo.tet' 是异步操作通过回调函数来捕获异常

//定义async2 异步操作并抛出异常信息
function async2(continuation) {
  setTimeout(function() {
    try {
      var res = 42;
      if (true)
        throw new Error("woops!");
      else
        continuation(null, res); // pass 'null' for error
    } catch(e) {
      continuation(e, null);
    }
  }, 2000);
}
//通过回调函数 处理异常信息
async2(function(err, res) {
  if (err)
    console.log("Error: (cps) failed:", err);
  else
    console.log("(cps) received:", res);
});
// Error: (cps) failed: woops!

CommonJS

概述

node.js 采用commonjs模块规范每一个文件就是一个模块有自己的作用域
require() 加载模块
module.exports.*** 输出模块

特点

所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存
模块加载的顺序，按照其在代码中出现的顺序

module对象

node每个模板内置一个modul对象有几个属性

modul.exports

定义表示模块的输出一个模块(文件)只有一个出口
node为每一个模块内置exports变量指向module.exports

1	var exports = module.exports;

可以只用module.exports来输出函数

require命令

基本用法 var foo = require('foo.js');

目录加载

目录中放置package.json require()会根据main 加载文件目录

{
  "name" : "some-library",
  "main" : "./lib/some-library.js"
}

vue-router

发表于 2018-04-29 | 分类于 VUE

vue-router

文件目录

开始

html基础部分 (app.vue)

<!--展现内容  -->
<router-view></router-view>
<!--内容跳转  -->
<router-link to="/a">a</router-link>

javascript基础部分 (routes.js)

import a from './components/a.vue';
//定义路由的路线
const routes = [
  {
    //路线的url 名字 对应的组件
    path:'/a',
    name:'a',
    component:a
  }
]
export default routes;

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import routes from './router';
//全局注册使用vue-router
Vue.use(VueRouter);
//初始化路由 定义路线
const router = new VueRouter({
  routes:routes
});
//给vue的实例 使用路由
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

vuex

发表于 2018-04-29 | 分类于 VUE

vuex

vuex是状态管理工具
vuex的核心是store(仓库)
只能通过commit的方法改变store中的state(状态)

api概述

vuex.store

import Vuex from 'vuex'
const store = new Vuex.Store({ ...options })

// 注册仓库
export default new Vuex.Store({
  state,
  mutations,
});

stare 状态

定义

1
2
3

const state = {
  count: 1
};

组件获得stare的方法

//方法一 计算属性 保存
computed: {
  count(){
    return this.$store.state.count;
  }
},
// 方法二 mapStare 辅助函数
import { mapState } from 'vuex';
computed: {
  ...mapState(['count'])
}

mutations 改变

定义改变仓库的状态的方法

定义

const mutations = {
  // 第一参数默认为state,n为参数
  add(state,n) {
    state.count+=n;
  },
  reduce(state) {
    state.count--;
  }
};

使用

//第一种方法
methods: {
  add(n) {
    this.$store.commit('add', n);
  }
}
//第二种通过辅助函数
import { mapMutations } from 'vuex';
methods: {
  ...mapMutations(['add', 'reduce'])
}

Getters 计算属性

定义

const getters = {
  todo:(state) => {
    return state.count += 50;
  }
};

使用

//第一种
todo() {
  return this.$store.getters.todo
}
//第二种
import { mapGetters } from 'vuex';
computed: {
  ...mapGetters(['todo'])
}

LiangJiaYu

热爱前端

GitHub

vue样式绑定

class对象语法

class数组语法

style对象语法

style数组语法

基本用法

文本

复选框

单选

绑定value

修饰符

vue组件 vue

未完成

使用组件

全局注册和局部注册

dom解析限制

组件的data必须是函数

父元素和子元素通讯

Prop

基本用法

父模板传入数据

单向数据流

自定义事件

slot分发内容

编译作用域

单个slot

具名slot

条件渲染

列表循环

基本用法

对象循环

key

数组更新

显示过滤/排序结果

webpack 学习笔记

webpack 配置文件 webpack.config.js

实例

http协议

概述

打开首页

请求 响应

request

response

http状态码

package.json学习笔记

npm学习笔记

node学习笔记

简介

异步操作

全局变量和方法

模块化

核心模块

自定义模板

异常处理

回调函数

CommonJS

概述

特点

module对象

modul.exports

require命令

目录加载

文件目录

开始

html基础部分 (app.vue)

javascript基础部分 (routes.js)

main.js

api概述

vuex.store

stare 状态

定义

组件获得stare的方法

mutations 改变

定义

使用

Getters 计算属性

定义

使用

请求响应

`request`

`response`

`http状态码`