vue的介绍

作者: flyjar | 来源:发表于2020-09-28 11:39 被阅读0次

vue--frame-init
vue-router
Vue-Router基本用法和高级用法，包含实战示例及代码（基于
Vue学习笔记进阶篇——vue-cli安装及介绍
vue学习笔记（2）——基础设置
2019年底史上最全Vue框架整理从基础到实战(三)
vue的介绍
在上海乐字节学习前端渐进式框架【Vue】
Vue 及双向数据绑定 Vue事件介绍以及Vue中的ref获取
配置vue-router

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

二、MVVM

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

三、快速开始

1.页面中引入

<script src="https://cdn.bootcdn.net/ajax/libs/vue/0.10.0/vue.js"></script>

2.body中加入

<div id="app">
    {{name}}
</div>

3.编写js

<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          name:"小明"
      }
    });
</script>

四、方法

1.vue中创建方法

<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          name:"小明"
      },
      methods:{
          //方法中有默认参数，event，通过event.target可以拿到绑定此事件的标签
          methodTest(event){
             alert("方法测试");
          }
      }
    });
</script>

2.调用方法

第一种 <input v-on:click="methodTest"/> 绑定了input事件，和click事件
第二种 {{methodTest()}}

五、关键字

1.v-model

<input v-model="name"/> //这时input输入框的值，就是小明了

2.v-on

<input v-on:input="inputValue" v-on:click="clickInput"/> 绑定了input事件，和click事件

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

<input @input="inputValue" @click="clickInput"/> 绑定了input事件，和click事件

4.数据绑定

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

<a v-bind:href="link">网址<a/>

5.简化的属性绑定

<a :href="link">网址</a>

6.v-once

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

<p v-once>{{linnk}}</p>
<input v-model="link"/>
<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          link:"http://www.baidu.com"
      }
    });
</script>

7.v-html

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

事件修饰符

test禁止冒泡，向下传递，点击内部div，不会触发外部div的事件
<div @click="test2">  <div @click.stop="test"></div>  </div>

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

六.计算属性computed

<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          link:"http://www.baidu.com"
      },
      computed:{
            getNowDate:function(){
                return new Date();
            }
      }
    });
</script>

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

七.watch

<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          link:"http://www.baidu.com"
      },
      watch:{
          link:function(newValue,oldValue){
              console.log(newValue);
          }
      }
    });
  //监听link属性，当link的值发生变化时，对应的watch就会被触发
</script>

八、样式操作

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

<style type="text/css">
  .colorStyle{
    color:green
  }
  .width100{
    width:100%
  }
</style>
<div :class="[colorStyle,widthStyle]"></div>
<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          colorStyle:"green",
          widthStyle:"width100"
      }
    });
  //监听link属性，当link的值发生变化时，对应的watch就会被触发
</script>

2.绑定style

第一种
<div :style="{backgroundColor:divColor}"></div>
//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用
<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          divColor:"green"
      }
    });
 
</script>

第二种
<div :style="divStyle"></div>
//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用
<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          divStyle:{
            backgroundColor:"green",
            width:"100px",
            height:"100px"
          }
      }
    });
</script>

第三种
<div :style="[divStyle,{backgroundColor:divColor}]"></div>
//backgroundColor就是background-color，但是在这样json方式的绑定上，必须得backgroundColor这样用
<script>  
    new Vue({
      el:"#app",//div的id
      data:{
          divStyle:{
            backgroundColor:"green",
            width:"100px",
            height:"100px"
          }
      }
    });
</script>

九、vue中的分支语句

v-if v-else v-else-if

<div v-if="test"></div>      //test=true时，当前div显示
<div v-else="test"></div>    //test=fasle时，当前div显示
<div v-else-if="test2"></div> //test=false,test2=true 当前div显示

v-show

<div v-show="test"></div> //test=true，当前div显示 ,false隐藏

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

十、循环

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

<ul>
  <li v-for="(item,index) in args" :key="index">{{item}}</li>
</ul>

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

<script>  
 var v1=new Vue({
      el:"#app",//div的id
      data:{
          name:"小明"
      },
      methods:{
          //方法中有默认参数，event，通过event.target可以拿到绑定此事件的标签
          methodTest(){
             alert("方法测试");
          }
      }
});
  var v2=new Vue({
      el:"#app2",//div的id
      data:{
          age:11
      },
      methods:{
          //方法中有默认参数，event，通过event.target可以拿到绑定此事件的标签
          app2MethodTest(event){
            v1.methodTest();
            v1.name="大明";
          }
      }
});
</script>

十二、实例属性

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

<script>  
 var v1=new Vue({
      el:"#app",//div的id
      data:{
          name:"小明"
      },
      methods:{
          //方法中有默认参数，event，通过event.target可以拿到绑定此事件的标签
          methodTest(){
             alert("方法测试");
          }
      }
});
  var data={test:"测试"};
  var v2=new Vue({
      el:"#app2",//div的id
      data:{
          age:11
      },
      methods:{
          
          app2MethodTest(){
            v1.$data=data;//这样就修改了v1中的data。这就是实例属性。有很多，可以在官网api文档中查看
          }
      }
});
</script>

2.$refs实例属性

<button type="button" ref="refButton" @click="showTime">点我</button> //ref属性类似于id

<script>  
    var v1=new Vue({
        el:"#app",
      methods:{
         showTime:function(){
           this.$refs.refButton.innerHTML="hello";    //第一种this.$refs.refButton拿到的就是dom
           this.$refs['refButton'].innerHTML="hello2";//第二种
         }
      }
  });
</script>

3.$mount 动态绑定

<div id="app"></div>
<script>  
    var v1=new Vue({
     //注释掉 el:"#app",
      template:"<div>测试</div>"  //这样app的div中就会插入这一段html代码
    });
    v1.$mount("#app"); //这样是绑定到id为app的div上。
</script>

十三、组件化

1.全局注册组件的方式

<!--只有被vue绑定的div中，都可以使用diy这个全局组件，这就是全局组件-->
<div id="app">
  <diy></diy>
</div>  

<div id="app2">
  <diy></diy>
</div>  



<script>
   //这种方式是一种全局注册组件的方式
  Vue.component("diy",{
    template:"{{title}}<div @click='btnfn'>点我</div>", //template只有一个跟标签，不能存在同级别的标签
    data:function(){
      return {title:"hello"};
    },
    methods:{
      btnfn:function(){
          alert("hello");
      }
    }
  });
 
   new Vue({
      el:"#app",
      data:{}
   });
 
   new Vue({
      el:"#app2",
      data:{}
   });

</script>

2.局部注册组件的方式


<div id="app">
   <diy></diy> //这个diy组件，只能在这里用
</div>  


<script>
   
  new Vue({
        el: "#app",
        //局部注册的方式
        component: {
            "diy": {
                template: "{{title}}<div @click='btnfn'>点我</div>", //template只有一个跟标签，不能存在同级别的标签
                data: function () {
                    return { title: "hello" };
                },
                methods: {
                    btnfn: function () {
                        alert("hello");
                    }
                }
            }
        }
    });

</script>

十三、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 父子组件的传值

子组件
<template>
  <view>
    <div>{{mode}}</div>
    <div>{{name}}</div>
  </view>
</template>
<script>
export default {
        name: 'UniDrawer',
        props: {
            /**
             * 显示模式（左、右），只在初始化生效
             */
            mode: {
                type: String,
                default: ''
            },
      name: {
                type: String,
                default: ''
            } 
    } 
 }      
</script>

父组件
<template>
   <view>
     <uni-drawer :mode="mode" :name="name"></uni-drawer>
    
   </view>
</template>
<script>
    import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
    export default {
        components: {
            uniDrawer
        },
        data() {
        return {
           mode:"模式",
           name:"小明"
        };
    }
  }
</script>

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

父组件
<template>
  <div>
    <child @fatherMethod="fatherMethodOther"></child>
  </div>
</template>
<script>
  import child from './child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethodOther(str) {
        console.log(str);
      }
    }
  };
</script>

子组件
<template>
  <div>
    <button @click="childMethod">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
     this.$emit('fatherMethod', 'hello');  //fatherMethod就是父组件的HTML标签中的@fatherMethod
      }
    }
  };
</script>

十五、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所需要的依赖

在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
    }
  ]
})

在main.js中导入router

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

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

在App.vue中加入<router-view>标签

<template>
  <div id="app"> 
     <router-view><router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

2.5路由跳转

标签式跳转

<router-link to="/路由地址">跳转路径</router-link>

js跳转

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

2.6路由传参

第一种

父页面

<div class="examine" @click="insurance(2)">查看详情</div>
<script>
methods：{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: '/particulars/${id}'
        })
}
</script>

路由文件配置

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

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

this.$route.params.id

第二种

父页面

<div class="examine" @click="insurance(2)">查看详情</div>
<script>
methods：{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: 'particulars',
          params: {
            id: id
          }
        })
}
</script>

路由文件配置

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

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

this.$route.params.id

第三种

父页面

<div class="examine" @click="insurance(2)">查看详情</div>
<script>
methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

</script>

路由文件配置

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

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

this.$route.query.id

第四种

父页面

<router-link :to="{name:'detail',query:{id:1}}"> xxx </router-link>

路由文件配置

{
     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就可以了

<template>
<div>
 <div>
    <el-radio v-model="radio1" label="1" border>备选项1</el-radio>
    <el-radio v-model="radio1" label="2" border>备选项2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio v-model="radio2" label="1" border size="medium">备选项1</el-radio>
    <el-radio v-model="radio2" label="2" border size="medium">备选项2</el-radio>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio3" size="small">
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border disabled>备选项2</el-radio>
    </el-radio-group>
  </div>
  <div style="margin-top: 20px">
    <el-radio-group v-model="radio4" size="mini" disabled>
      <el-radio label="1" border>备选项1</el-radio>
      <el-radio label="2" border>备选项2</el-radio>
    </el-radio-group>
  </div>
</div> 
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
     return {
        radio1: '1',
        radio2: '1',
        radio3: '1',
        radio4: '1'
      };
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

十八、element-ui使用

1.table中判断

 <el-table :data="arryData">
       <el-table-column prop="name" label="姓名" ></el-table-column>
     
       <!--判断为0显示女，为1显示男-->
       <el-table-column prop="sex" label="性别" width="180">
         <template slot-scope="scope">
           <span v-if="scope.row.sex">男</span>
           <span v-else>女</span>
         </template>
       </el-table-column>
       
       <el-table-column prop="age" label="性别" width="180"></el-table-column>
     </el-table>

vue--frame-init
vue install & usage webpack介绍 vue-cli介绍 vue project creat...
vue-router
vue-router FAQ 1 Vue-Router基本介绍 1.1 基本介绍 Vue Router：Vue.j...
Vue-Router基本用法和高级用法，包含实战示例及代码（基于
Vue-Router 1 基本介绍 1.1 官方文档 1.2 介绍 Vue Router 是 Vue.js 官方的...
Vue学习笔记进阶篇——vue-cli安装及介绍
本文为转载，原文：Vue学习笔记进阶篇——vue-cli安装及介绍介绍 Vue-cli是Vue的脚手架工具主要...
vue学习笔记（2）——基础设置
githubvue学习笔记（1）主要介绍vue项目的创建vue学习笔记（3）主要介绍vue的router简单用法对...
2019年底史上最全Vue框架整理从基础到实战(三)
Vue-Router 资料 Vue-router Vuex 介绍 Vue Router 是 Vue.js 官方的路...
vue的介绍
一、Vue的介绍Vue是一个渐进式的js框架，只注视视图层，结合了HTML+CSS+JS，非常的一用哪个，并且有很...
在上海乐字节学习前端渐进式框架【Vue】
一，Vue简单介绍首先我们来看看Vue的官网介绍， Vue (读音 /vjuː/，类似于 view) 是一套用于...
Vue 及双向数据绑定 Vue事件介绍以及Vue中的ref获取
1，vue的双向数据绑定和Vue事件介绍 2，Vue中ref获取dom节点
配置vue-router
vue-router介绍 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js ...