忘掉地平线

语法// 第一个参数：指令名称// 第二个参数：配置对象，指定指令的钩子函数Vue.directive('directiveName', { bind() {},// 只调用一次，指令第一次绑定到元素时调用。 update() {},//所在组件的 VNode 更新时调用(先) componentUpdated(){},// 所在组件的 VNode 更新时调用 inserted:

后缀名：.vue，该文件需要被预编译后才能在浏览器中使用注意：单文件组件依赖于两个包 vue-loader / vue-template-compiler安装：npm i -D vue-loader vue-template-compiler<!-- App.vue 示例代码： --><template> <div> <h1>VUE 单文件组件示例 -- App.vue</h1>

安装 安装：npm i -D babel-core babel-loader babel-plugin-transform-runtime 安装：npm i -D babel-preset-es2015 babel-preset-stage-0 安装：npm i -S babel-runtime 说明：babel-core 把 js 代码分析成 ast (抽象语法树, 是

getaxios .get('http://xxx.api/xxx') .then(response => { this.list = response.data.message }) .catch(err => { // console.log(err);

箭头函数自身不绑定this，箭头函数内部的this由外部的this决定语法 () => {} 没有参数（必须由小括号） item => {} 一个参数（可以省略小括号） (item) => {} 一个参数 (item, index) => {} 两个参数（必须带有小括号）

全局过滤器注意：要先创建全局过滤器，在创建vue实例语法// 第一个参数表示：过滤器的名称// 第二个参数表示：函数，使用过滤器的时候，这个函数中的代码会被执行Vue.filter('filterName', function (value) { // value 表示要过滤的内容})实例：日期过滤Vue.filter('date', function (input, format = '

指令 (Directives) 是带有 v- 前缀的特殊属性常用指令v-text// 用来设置当前元素的文本内容。相当于 innerText 的功能<h1 v-text="msg">默认的文本内容</h1>v-html<h1 v-html="msg">默认的文本内容</h1>v-bind 作用:用来给当前元素添加HTML属性，进行HTML属性数据的动态绑定 v-bind:title

使用webpack打包CSS 安装：npm i -D style-loader css-loader【main.js】// 导入 css 文件import './css/app.css'【配置前】npm run dev 【webpack.config.js】// 配置各种资源文件的loader加载器module: { // 配置匹配规则 rules: [ // test

使用 vue 的基本步骤： 1 引入 vue.js 2 创建 Vue 的实例 Vue构造函数的参数是一个对象，对象中包含了很多的配置项<script src="./vue.js"></script> <script> var vm = new Vue({ // el -> element // el 配置项的值是字符串（选择器）或

安装webpack全局安装：npm i -g webpack 目的：在任何目录中通过CLI使用 webpack 这个命令项目安装：npm i -D webpack目的：执行当前项目的构建安装失败：目录下存在一个以前的jQuery包 安装成功使用实例思路1 使用npm init -y 初始package.json，使用npm来管理项目中的包 2 新建 项目目录结构及index.html和m

1. 引入vue和vue-router 安装vue-router: npm i -S vue-router<!-- 引入 vue.js --> <script src="./vue.js"></script><!-- 引入 vue-router.js , 注意：vue-router 是vue的插件， 所以，在使用路由之前先引入vue.js--> <script src="./node_

1. 什么是SPA 单页Web应用（single page application，SPA），就是只有一个Web页面的应用。 对于单页应用程序来说, 只有第一次会加载页面, 以后的每次请求, 仅仅是获取必要的数据. 然后, 由页面中js解析获取的数据, 展示在页面中2. 实现SPA的技术ajax（数据请求）前端路由（hash）3. 路由（实现） 路由即：浏览器中的哈希

说明：vm.$refs 一个对象，持有已注册过 ref 的所有子组件（或HTML元素）使用：在 HTML元素 中，添加ref属性，然后在JS中通过vm.$refs.属性来获取注意：如果获取的是一个子组件，那么通过ref就能获取到子组件中的data和methods添加ref属性<div id="app"> <h1 ref="h1Ele">这是H1</h1> <hello ref=

父子组件通信父到子步骤：在 子组件标签上 通过添加自定义属性的方式, 指定要传递的数据在 子组件中 通过 props 属性, 显示指定 由父组件传递过来的数据. 然后, 才可以在子组件中使用使用<div id="app"> //:foo 表示要传递给子组件一个叫做 foo 的属性， 它的值是：父组件中的msg属性的值 <child :foo="msg"></child></d

全局组件语法第一个参数：表示组件的名称第二个参数：表示组件的配置对象Vue.component('组件的名称', { template:``, // 模板 //在组件中也是通过data属性来提供数据的,，但是，组件中要求data的值必须是一个函数，使用 函数的返回值（对象），来作为数据 data:function(){ return [name:'jack'] },

// a.js// export default 只能出现一次const num = 123export default num// main.js// 可以自定义接收名称// import num from './a'import num1 from './a'// a.jsexport const str = 'abc'// main.js// 注意 导入名称 必须与 导出名称