vue学习笔记一

vue.js简介

概念：构建用户界面的渐进式框架。

（渐进式：没必要一开始就用Vue全部的全家桶，根据场景，官方提供了方便的框架供你使用。）

Vue 的核心库只关注视图层。

【引入vue】

能够建立一个 .html 文件，而后经过以下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>复制代码

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>复制代码

$ npm install vue复制代码

安装脚手架：

1. cnpm install webpack -g复制代码

2. npm install vue -cli -g

3. vue init webpack myproject复制代码

4. cd 目录路径复制代码

5. npm install复制代码

6. npm run dev复制代码

Project name 【输入项目名】

Project description 【项目描述】

Use ESlint to lint your code? 【代码检查】

Set up unit tests 【测试】

Setup e2e tests with Nighwatch? 【测试】

在经过npm安装项目后，咱们须要对其目录进行解析：

（1） Build：项目构建（webpack）相关代码;

（2） config：配置目录，包括端口号等。

（3） node_modules：npm加载的项目依赖模块

（4） src：这个目录当中的内容包含了咱们基本上要作的事情，这里包含了几个文件：

（一）assets：存放图片

（二）components：存放组件文件

（三）App.vue：项目入口文件，组件也能够直接写在这里不适用components

（四）main.js：核心文件

（5） static：静态资源目录

（6） test：初始测试目录

（7） .xxxx：配置文件，包括git配置和语法配置等

（8） index.html：首页

（9） package.json：项目配置文件

（10） README.md：说明文档

兼容性：

Vue 不支持 IE8 及如下版本，由于 Vue 使用了 IE8 没法模拟的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的浏览器。

【建立vue实例】

var vm = new Vue({
  // 选项
})复制代码

【生命周期函数】

1.beforeCreate 建立前执行（data和el都还未初始化） 

 2.create 完成建立 （完成了data数据初始化，el还未初始化） 

 3.beforeMount 载入前（完成了data和el数据初始化） 

 4.mounted 载入后html已经渲染(ajax请求能够放在这个函数中) 

 5.beforeUpdate 更新前状态（view层的数据变化前，不是data中的数据改变前） 

 6.update 更新状态后 

 7.beforeDestroy 销毁前 

 8.destroy 销毁后 （Dom元素存在，只是再也不受vue控制）

模板语法

插值表达式：{{ msg}}

v-html：动态注入标签，注意：你的站点上动态渲染的任意 HTML 可能会很是危险，由于它很容易致使 XSS 攻击。请只对可信内容使用 HTML 插值，毫不要对用户提供的内容使用插值。

v-bind：动态绑定一个或多个html属性，绑定时注意属性前加冒号:disabled/:id

v-if：条件判断，根据真假判断条件符合即渲染结果。在切换时元素及它的数据绑定 / 组件被销毁并重建。

v-else:限制：前一兄弟元素必须有 v-if 或 v-else-if。

v-else-if:前一兄弟元素必须有 v-if 或 v-else-if。

v-on：用来监听事件，绑定事件 （可缩写为@click）

阻止默认事件：【v-on:click.prevent="go(index,$event)"】

阻止默认事件冒泡：【v-on:click.stop="go(index,$event)"】

只生效一次：【v-on:click.once="go(index,$event)"】

键盘事件监听：【v-on:keyup.enter="write"】

v-text: 更新元素的 textContent。若是要更新部分的 textContent ，须要使用 {{ Mustache }} 插值。

v-show:根据表达式之真假值，切换元素的 display CSS 属性。

v-for:基于源数据屡次渲染元素或模板块，v-for 指令须要使用 item in items 形式的特殊语法。最好加上:key

v-model:在表单控件或者组件上建立双向绑定。

v-once:只渲染元素和组件一次。

【v-if有更高的切换开销，v-show有更高的初始渲染开销，频繁切换使用v-show,条件不多改变使用v-if】

特殊特性

有相同父元素的子元素必须有独特的 key。重复的 key 会形成渲染错误。

最多见的用例是结合 v-for

计算属性

computed:{}复制代码

有侦听的效果，写在计算属性中的方法能够直接在插值表达式中使用；

绑定class

<div v-bind:class="{ active: isActive }"></div>复制代码

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 状态。

v-bind:class 指令也能够与普通的 class 属性共存，例如：

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>复制代码

全局API

filter：

Vue.filter('my-filter', function (value) {
  // 返回处理后的值
})

// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')复制代码

例：

data(){

nums:[1,2,3,4,5,6,7],

},

methods:{

   getOdd(){

this.nums.filter(function(num){

    if (num % 2 !==0){

        console.log(num);}})

}}

component：

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })复制代码

其余：

watch只能监听一个对象

computed能够对多个对象进行监听

安装配置路由

1 npm install --save vue-router 

2 main.js下：import router from './router',new Vue里添加router

3 index.js里：import Router from 'vue-router'

 Vue.use(Router)

4 视图加载的位置：<router-view></router-view>

5 实现相似选项卡或者锚点连接的功能 用于组件间的跳转 使用标签 进行跳转 

 <router-link to="/words">words</router-link> 

<router-link to="/Navlist/words">words</router-link>复制代码

6 在index.js注入的地方加上：redirect:"/test2/test1", 即默认显示哪一个子页面

7 【路由点击高亮效果】 全局：

 index.js里面给全局添加一个class名，而后全局均可以使用这个class 在export default new Router里写：linkActiveClass: "active", 

而后在想要路由点击高亮的页面style里： .active{ color: red; }

懒加载

安装：cnpm install vue-lazyload --save-dev 

引入在main.js中： import VueLazyload from 'vue-lazyload' 

Vue.use(VueLazyload) 

在要加载的页面使用标签： <img v-lazy="imgUrl"/> imgUrl为data中的数据

使用swiper

1 cnpm install --save vue-awesome-swiper

2 main.js里：

 import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)复制代码

使用element

1 npm i element-ui -S

2 main.js里：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

引入jQuery

1 npm install jquery --save-dev

2 在build/webpack.base.conf.js中添加以下内容：

var webpack = require('webpack')

plugins: [

new webpack.ProvidePlugin({

$: "jquery" ,

jQuery: "jquery"

})

],

3 在src/main.js文件中 引入jquery或在单页面中引用

import $ from 'jquery'

4 npm run dev

5 mounted（）里调用

vue安装Bootstrap

一、安装bootstrap，使用命令npm install bootstrap --save-dev

二、在package.json文件中引入bootstrap这个模块

三、在src/main.js文件中 引入jquery

1 2	import 'bootstrap/dist/css/bootstrap.min.css' import 'bootstrap/dist/js/bootstrap.min'