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

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

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

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

​​import ​​​​'bootstrap/dist/css/bootstrap.min.css'​​
​​import ​​​​'bootstrap/dist/js/bootstrap.min'​​