vue-tutorial

vue-tutorial copied to clipboard

vue

9

[Vue.js 教程 - 极客学院Wiki](http://wiki.jikexueyuan.com/project/vue-js/start.html) Vue.js首先是个MVVM的框架，跟angular在某些地方很相似，它没有控制器的概念，有的是组建和过滤器来处理数据在M跟V层之间的通信 **View** 用户看到的实际HTML / DOM demo.$el // The View **Model** 这是一个略微修改的Javascript对象 demo.$data // The Model

Wscats

**createElement**的函数格式，注意只能拥有一个根节点（VNode） ```js // @returns {VNode} createElement( // {String | Object | Function} // 一个 HTML 标签，组件选项，或一个函数 // 必须 Return 上述其中一个 'div', // {Object} // 一个对应属性的数据对象 // 您可以在 template 中使用.可选项. {...

Wscats

# 安装 由于vue2.x版本删除了filterBy等过滤器，我们可以用lodash来模拟过滤器的方法 安装并引用lodash ```javascript var Vue = require("vue"); var _ = require("lodash"); ``` # 使用 页面接受输入框需要搜索的值，和搜索的列表结果 ```javascript new Vue({ el: "#demo", template: ` user age name:{{arr.user}} age:{{arr.age}} `, data:...

Wscats

# 安装 - 推荐使用 Node.js 版本 6+。 - `vue-server-renderer` 和 `vue` 必须匹配版本。 - `vue-server-renderer` 依赖一些 Node.js 原生模块，因此只能在 Node.js 中使用。我们可能会提供一个更简单的构建，可以在将来在其他「JavaScript 运行时(runtime)」运行。 ```bash npm install vue vue-server-renderer express --save ``` # 渲染实例...

Wscats

# swiper ```bash npm install swiper ```  在项目组件中引入swiper模块 ```js import 'swiper';//注意这里只是引入swiper.js import '../node_modules/swiper/dist/css/swiper.css'//还要单独引入样式，找到node_modules单独把样式引进来 ``` 轮播图组件 而初始化的代码和配置参数放进`mounted () {}`函数里面即可 ```html import 'swiper'; import '../node_modules/swiper/dist/css/swiper.css' export default { data() { return...

Wscats

# 安装 安装或者引入CDN文件 ```javascript npm install axios ``` ```html ``` # GET 在Vue原型链上绑定，就可以全局使用$http方法 ```javascript import axios from 'axios'; Vue.prototype.$http = axios; ``` 然后我们就可以，其他地方使用的话，如同使用**vue-resource**一样，我们还可以在`get`或者`post`请求后面增加请求头`header` ```javascript this.$http.get("http://www.tuling123.com/openapi/api", { params: { key: "c75ba576f50ddaa5fd2a87615d144ecf",...

Wscats

vue源码参考文档

6

[剖析Vue原理&实现双向绑定MVVM](https://segmentfault.com/a/1190000006599500) **Object.keys**可以用来遍历数组或者对象的索引值或者属性值 ```js var arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // console: ['0', '1', '2'] // array like object var obj = { 0: 'a', 1: 'b', 2: 'c' };...

Wscats

# hashchange 现在大部分单页面应用程序的路由切换都是以下这种方式 ```html http://www.xxx.com/#/index ``` 这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发 hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听 hashchange 来实现更新页面部分内容的操作 ```html index home function matchAndUpdate() { // 匹配 hash 做 dom 更新操作...

Wscats

# 安装 具体可以看[官方文档](https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/installation.html#npm) ```js npm install better-scroll --save //接下来就可以在代码中引入了，webpack等构建工具都支持从node_modules里引入代码： import BScroll from 'better-scroll' ``` 在vue框架中使用的具体介绍，可以参考作者这篇文章[当 better-scroll 遇见 Vue](https://zhuanlan.zhihu.com/p/27407024) # 引入 HTML部分，以下是很多Vue项目经典的写法 ```html ``` JS部分，异步数据的处理注意加载的时机，要在数据完全并且得到并且渲染之后，才能开始挂载逻辑，这里的`this.$nextTick`是一个异步函数，为了确保DOM已经渲染 ```js import BScroll from "better-scroll"; export...

Wscats

# 配置文件 `Vue-CLI3`搭建的项目，目录结构相比2.0有很大的改变，之前的`build`和`config`文件夹没有了，如果要像以前那样配置`webpack`的参数，只需要在项目的根目录下新建`vue.config.js 文件`注意是根目录，不是`src`目录 ```js module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build with in-browser compiler? //...

Wscats