vue的介绍
2020-09-28 本文已影响0人
flyjar
一、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提供的服务器上的一个工具。
安装后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所需要的依赖
- 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: '<App/>'
})
- 2.4
在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>
