vue的介绍

一、Vue的介绍
Vue是一个渐进式的js框架，只注视视图层，结合了HTML+CSS+JS，非常的一用哪个，并且有很好的生态系统。而且vue体积很小，速度很快，优化很到位。

二、MVVM

字母	单词	含义
M	model	数据模型
V	view	视图
VM	ViewModel	连接视图和数据的中间件

三、快速开始

1.页面中引入

2.body中加入

    {{name}}

3.编写js

四、方法

1.vue中创建方法

2.调用方法

第一种  绑定了input事件，和click事件
第二种 {{methodTest()}}

五、关键字

1.v-model

 //这时input输入框的值，就是小明了

2.v-on

 绑定了input事件，和click事件

3.简化的事件绑定@click @input

 绑定了input事件，和click事件

4.数据绑定

v-bind ,插值表达式（{{name}}这就是插值表达式）是不能写在html的标签的属性内的。那如果一定要用vue中的属性作为html标签的属性的内容，就可以通过v-bind进行属性绑定

网址

5.简化的属性绑定

网址

6.v-once

当标签加入上了v-once标签后，那么p标签中的值只能是http://www.baidu.com，以后再修改link的值，p标签中的值，还是http://www.baidu.com，p标签不会再监听link这个值了，只读取第一次的值，以后不再监听了

{{linnk}}

7.v-html

读取html代码，不会转义成文本

8. 事件修饰符

test禁止冒泡，向下传递，点击内部div，不会触发外部div的事件
  
  

//当按下回车键盘的时候，触发。@keyup 不只可以用enter。可以用键盘上的所有案件
 

六.计算属性computed

{{getNowDate}} //代表用的是一个属性，但是这个属性具有计算的能力。在页面初始化的时候，会计算结果，并把结果返给getNowDate这个属性上。以后再次调用这个getNowDate属性，值不会发生变化。
如果计算属性依赖其他的值，当其他的依赖数据没有发生改变，它调用的是缓存的数据。如果依赖的值发生改变时，计算属性则会重新计算值

七.watch

八、样式操作

1.当一个class需要绑定对个属性时

2.绑定style

第一种

//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用


第二种

//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用


第三种

//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用

九、vue中的分支语句

v-if v-else v-else-if

      //test=true时，当前div显示
    //test=fasle时，当前div显示
 //test=false,test2=true 当前div显示

v-show

 //test=true，当前div显示 ,false隐藏

v-show和v-if相似，v-show是操作的元素的display属性，而v-if，是渲染不渲染次元素。所以v-show的效率更高

十、循环

1.for，推荐循环时，给要循环的元素加上key属性

  
{{item}}
  

十一、多个vue对象，相互调用

十二、实例属性

1.实例属性，有很多，可以在官网api文档中查看

2.$refs实例属性

点我 //ref属性类似于id

3.$mount 动态绑定

十三、组件化

1.全局注册组件的方式

2.局部注册组件的方式

    //这个diy组件，只能在这里用
  

十三、vue-cli

vue-cli是一个类似maven的工具，可以构建出vue的各种脚手架

1.使用vue-cli

要想使用vue-cli，想要安装node.js，node.js是一个可以让前端运行在node.js提供的服务器上的一个工具。

http://nodejs.cn.download/

安装后node.js之后，进行改源

npm i -g cnpm --registry=https://registry.npm.taobao.org

2.使用node.js安装vue-cli

npm是node.js指令

cnpm是改源之后的，指令

cnpm install vue-cli  -g  //-g代表全局安全 golabel

3.使用vue-cli

vue list //查看你vue-cli所有的脚手架
vue init webpack-simple myprojectname //创建一个webpack-simple脚手架的项目,名称myprojectname，项目名称中不能存在大写
cd myprojectname //进入到项目里面
cnpm install // 安装当前项目所需要的依赖，类似于maven加入新的jar的定位，需要刷新一下，去下载对应的jar
cnpm run dev //这样项目就可以以开发者模式启动起来的

4.webpack项目文件夹结构

这里写图片描述

先从最外层走起（根目录文件）：

\1.babelrc：作为项目babel的配置文件（Babel 是一个 JavaScript 编译器，作为我们项目对js的编译），可以将我们项目es5以上的语法编译成大多浏览器都支持的es5语法等功能，还可以在这里配置一些框架的按需加载（如element-ui）
\2. .editorconfig：项目中编辑代码风格
\3. .gitignore : 用于git的忽略文件配置（我们使用git提交的时候，有些文件是不需要提交的，如node模块的node_modules文件夹、打包成功的dist文件夹等）
\4. .postcssrc.js: 用于对style的less语法支持配置
\5. index.html: 项目的首页，即我们编写的代码会通过这个文件显示给浏览器
\6. package.json package-lock.json: 这个就不用多说了吧，大家都懂是项目包的依赖文件
\7. README.md: 展现在GitHub上的描述文件

build文件夹

这里写图片描述

\1. build.js: 作为项目打包的时候（npm run build）的入口文件，通过这个js将整体项目打包
\2. check-versions.js：用于版本node和npm版本的检测
\3. utils.js：用于项目中关于loader器的引用和项目title、icon等设置
\4. vue-loader.conf.js：因为项目是基于vue的，所以，需要一个vue-loader来识别.vue后缀的文件，这个文件，就是vue-loader的配置文件
\5. webpack.base.conf.js：项目webpack的基础配置文件
\6. webpack.dev.conf.js：开发环境下的webpack配置文件
\7. webpack.prod.conf.js：生产环境下的webpack配置文件

config文件夹

这里写图片描述

\1. dev.env.js、prod.env.js：用于配置项目的环境变量
\2. index.js：用于webpack的一些配置信息

node_modules文件夹
这个文件夹就不多说了，是项目包存储的地方

src文件夹

这里写图片描述

这个文件夹内，就是我们真正项目代码的存储地址
\1. assets文件夹：这里放置项目的模块静态资源，如css，js还有图片、字体
\2. components文件夹：使用vue的都知道，vue是模块化的框架，我们将页面中的元素分模块编写，从而提高代码修改的方便性以及重用的效率，这个文件夹内就是我们项目的模块存放地址
\3. router文件夹：vue-router让我们能处理vue的路由，从而更佳的使用component，这个文件夹内就是个vue-router的配置文件
\4. APP.vue：作为项目的根组件，也就是我们直接吧这个组件装到index.html中进行渲染
\5. main.js：作为webpack项目的入口文件，在这个文件夹内，我们是可以引用静态资源以及对整体vue的配置

static文件夹
用于存放在整体项目的静态资源，如图片，字体等

十四、vue 父子组件的传值

子组件

父组件

  

6.子组件调用父组件的方法

父组件

子组件

十五、axios的使用

1.安装axios组件

cnpm install axios -s //先在项目安装axios这个组件
cnpm install //安装一下axios需要的其他插件

2.在main.js加入axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vus.use(VueAxios,axios)

3.发送ajax请求

//get,参数放到url后面
this.axios({
  method:"get",
  url:"http://url?name="+name+"&title="+title
}).then((response)=>{
   console.log(response);
});

//post，参数加入data中  
this.axios({
  method:"post",
  url:"http://url",
  data:{
     name:name,
     title:title
  }
}).then((response)=>{
   console.log(response);
});

4.axios注意点

前端向后端传输数据时，如果是get传输，直接传在url后；如果是post传输，则在请求体body中传输。

在body中的数据格式又有两种，一种是 json 数据格式，另一种是 字符串。具体要用哪种格式取决于后端入参的格式。

如果后端接收json数据类型，post 的 headers 需要设置 { ‘content-type’: ’application/json’ }，传给后端的数据就形如 { ‘name’:’edward’, ‘age’:’25’ }

如果后端接收的是（表单）字符串类型，post 的 headers 需设置 { ‘content-type’: ’application/x-www-form-urlencoded’ }，

，传输给后端的数据就形如 ‘name=edward&age=25’

如果想改变axios的post请求，带参协议有两种方式

十六、路由

1.什么是路由

在vue中的路由，能够帮组我们在一个vue组件中实现其他组件的相互切换。也就是说，可以通过路由模块，将制定的组件显示在路由视图上。

2.安装路由模块

• 2-1.

cnpm install vue-router -s //安装路由
cnpm install //更新vue-router所需要的依赖

• 2.2

在src下创建router文件夹。创建index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

• 2.3

在main.js中导入router

import Vue from 'vue'
import App from './App'
import router from './router'   //这个

new Vue({
  el: '#app',
  router,  //这个
  components: { App },
  template: ''
})

• 2.4

在App.vue中加入标签

• 2.5路由跳转

标签式跳转

跳转路径

js跳转

 this.$router.push({path:url})

• 2.6路由传参

第一种

父页面

查看详情

路由文件配置

{
     path: '/particulars/:id', //关键在这里
     name: 'particulars',
     component: particulars
 }

子组件中: 这样来获取参数

this.$route.params.id

第二种

父页面

查看详情

路由文件配置

{
     path: '/particulars',
     name: 'particulars',
     component: particulars
}

子组件中: 这样来获取参数

this.$route.params.id

第三种

父页面

查看详情

路由文件配置

{
     path: '/particulars',
     name: 'particulars',
     component: particulars
}

子组件中: 这样来获取参数

this.$route.query.id

第四种

父页面

 xxx 

路由文件配置

{
     path: '/detail',
     name: 'detail',
     component: particulars
}

子组件取参

this.$route.query.id

2.7子路由

十七、webpack 集成element-ui

1.创建webpack项目

vue init webpack webpackandelement  //创建webpack模板项目
cd webpackandelement                            //进入项目
cnpm install                                                //安装项目所需要的依赖

2.安装element-ui组件

cnpm i element-ui -S //安装组件
cnpm install                 //安装组件中需要的依赖

3.修改main.js

import Vue from 'vue';
import ElementUI from 'element-ui';             //这个。导入组件
import 'element-ui/lib/theme-chalk/index.css';  //这个。导入css
import App from './App.vue';

Vue.use(ElementUI);                                                 //这个。Vue使用组件

new Vue({
  el: '#app',
  render: h => h(App)
});

4.使用element-ui就可以了

十八、element-ui使用

1.table中判断