Vue

zybe

已于 2022-01-24 14:45:52 修改

阅读量179

点赞数

文章标签： vue.js javascript 前端

于 2020-06-13 03:04:20 首次发布

本文链接：https://blog.csdn.net/weixin_46272770/article/details/106706997

版权

安装

npm use taobao
npm init
npm install vue

静态页面用live-server启动,或在package.json添加脚本

"scripts": {
    "server": "live-server --port=port"
  }

单页面应用用
/vue.config.js

module.exports = {
    devServer: {
        port: [port],    
    }
};

数据绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="id">
    <!--双向绑定-->
    <input type="text" v-model="object.field"/>

    <!--单向绑定-->
    <label :属性="key"/>
    {{key}}<!--不转换标签-->
    <div v-text="key"></div> <!--不转换标签-->
    <div v-html="key"></div> <!--转换标签-->
</div>   
<script type="text/javascript">
    var vue = new Vue({
        el: '#id',//绑定el
        data: { //数据
            key: "",
            object: {
                field: ""
            }
        }
    });
</script>
</body>
</html>

方法绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="id">
    <!--
        事件:
        @click：单击
        @blur：失去焦点
        @keyup：松开按键
        @focus：获取焦点
        @change：值改变
        @keydown：按键按下
        @keypress：按键按下
        @mousedown：鼠标按下
        @mouseup：鼠标松开
        @mouseenter：鼠标进入
        @mouseleave：鼠标离开
        @mouseover：鼠标进入
        @keydown.xxx: 按下xxx键
    -->
    <label @事件="method()"/>

    <!--取消默认事件-->
    <a @click.prevent/>
</div>
<script type="text/javascript">
    var vue = new Vue({
        el: '#id',//绑定el
        methods : { 
            method(){}
        }
    });
</script>
</body>
</html>

遍历

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="id">
    <!--遍历数组-->
    <li v-for="(item,index) in list">
        {{index}} : {{item}}
    </li>

    <!--遍历对象属性-->
    <li v-for="(value, key) in object">
        {{key}} : {{value}}
    </li>

    <!--遍历对象数组-->
    <ul v-for="(object,index) in objects">
        <li v-for="(value, key) in object">
            {{key}} : {{value}}
        </li>
    </ul>
</div>
<script type="text/javascript">
    var vue = new Vue({
        el: '#id',//绑定el
        data: { //数据
            data: {
                list: [],

                object: {
                    key1: "",
                    key2: ""
                },

                objects: [{},{}]
            }
        }

    });
</script>
</body>
</html>

条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="id">
	<!--控制显示-->
    <div v-if="boolean"></div><!--不插入元素-->
    <div v-show="boolean"></div><!--style="display: none;"-->

	<!--条件判断-->
	<span v-if="num == 1">1</span>
    <span v-else-if="num == 2">2</span>
    <span v-else>3</span>
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: '#id',//绑定el
        data: { //数据
            boolean: false,
			num: 1
        }
    });
</script>
</body>
</html>

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{key}}
    </div>
    <script type="text/javascript">
		// 创建Vue实例
        var vm = new Vue({ 
            el : '#app', //绑定el
            data : { //数据
                key : ''
            },
            beforeCreate : function() {
                // data绑定: false
                // el绑定: false
                // dom渲染: false
            },
            created : function() {
                // data绑定: true
                // el绑定: false
                // dom渲染: false
            },
            beforeMount : function() {
                // data绑定: true
                // el绑定: true
                // dom渲染: false
            },
            mounted : function() {
                // data绑定: true
                // el绑定: true
                // dom渲染: true
            }
        });
    </script>
</body>
</html>

computed

可以引入外部js作为数据`

data.js

const datas =
    [
    ]

export default datas;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="id">
    {{key}}<!--作为属性引用-->
</div>

<script type="text/javascript">
	import datas from "@/data";

    var vue = new Vue({
        el: '#id',//绑定el
        computed:{
            key(){
                return "";
            },
            data(){
				return datas;	
			}
        }
    });
</script>
</body>
</html>

watch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="id">
    <input v-model="key"/>
    <input v-model="object.field">
</div>

<script type="text/javascript">
    var vue = new Vue({
        el: '#id',//绑定el
        data: {
            key: "",
            object: {
                field: ""
            }
        },
        watch:{
            //监控属性
            key: function (newValue, oldvalue) {},
            //监控对象的属性
            "object.field": function (newValue, oldvalue) {},
            //监控对象
            object:{
                deep:true,//深度监听对象属性
                handler:function (obj/*当前对象*/) {}
            }
        }
    });
</script>
</body>
</html>

watch属性监听url时,要跳转页面用location会循环监听,用history.replaceState(stateObj, title[, url]);替换url,再发送请求

axios

axios请求不能实现下载,通过dom添加a标签请求下载连接

		methods: {
            downloadRequest() {
               let a = document.createElement('a');
               a.href = window.location.href+'download';
               a.click();
            }
        }

Vue没有自带ajax

npm install axios

引用的是dist下的文件

<script src="node_modules/axios/dist/axios.js"></script>

axios({
	method: 'get',
	url: 'url',
	data: {
		key: ""
	}
}).then(response => { //如果要用this.属性要用箭头函数
	//response.data 返回数据
    //response.status 返回状态码
}).catch(function (error) {
	//npm i vue-simple-alert
	//import VueSimpleAlert from "vue-simple-alert";
	//Vue.use(VueSimpleAlert);
	this.$alert(error.response.data);
});

CORS

vue.config.js

直接请求/[path]

module.exports = {
    devServer: {
        port: [vuePort],
        proxy: {//配置跨域
            '/[path]': {
                target: 'http://localhost:[server-port]/[path]/',
                changOrigin: true,
                pathRewrite: {
                    '^/[path]': ''
                }
            }
        }
    },

}

单页面应用

创建应用

vue create [appname]

集成 TypeScript

vue add typescript

main.js

//全局启动axios,直接标签导入会报错
import axios from 'axios' 
axios.defaults.baseURL = '';
Vue.prototype.$axios = axios;

index.js

import 模板别名 from '@/components/Component' //导入模板

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'name',
      component: 模板别名
    }
  ]
})

Component.vue

<template>
  <div id="index">
    <!--无参跳转-->
    <router-link to="/">link</router-link>
  </div>
</template>

<script>
  export default {
    data(){ //单页面数据绑定方式
      return {
        key: ""
      }
    },
    methods: {
      jump(){ //有参跳转,获取用this.$route.query.key
        this.$router.push({
          path: '/',
          query: {
            key: this.key
          }
        })
      },
      axios(){
        this.$axios({ //获取全局axiox对象
          method: 'get',
          url: '/',
          data: this.key,
          data: {
            key: ""
          }
        });

		this.$axios.get('url', {
   			params: {
       			 key: "" 
   			}
		})
      }
    }
  }
</script>
<style scoped>

</style>

vue.config.js

module.exports = {
    devServer: {
        port: [port],
        disableHostCheck: true
    },

}

路由

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import [modulename] from '@/components/*Module.vue';
import {createRouter,createWebHistory} from 'vue-router';

const routes = [
    { path: '/modulename', component: modulename },
]

const router = createRouter({
    history: createWebHistory(),
    routes: routes,
})

createApp(App).use(router).mount('#app')

子组件

父组件引入

<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform" xmlns:float="http://www.w3.org/1999/xhtml">
	//子组件thhis.$emit(["event"])会触发事件,不用写参数,参数会自动进入方法,[key]会传递到子组件props
 	<son [@event]="[method]" [:var1]=["var1"]/>
</template>

<script>
    import [SON] from ['./SON']

    export default {
   		data: () => ({
   			[var1]: [value] 
		}),
        methods: {
         	[method]([data]){}
  		},
        components: {
			SON
		}

子组件

<template>
</template>

<script>
    export default {
        name: "son",
        //读取标签传递数据
        props: {
            [var1]: {
                type: Object,
                default: null
            }
        },
        methods: {
            method() {
            	//触发标签上事件
                this.$emit(["event"],[data]);
            }
        },
    }
</script>