001-基础知识

豚豚鼠

已于 2024-03-07 21:56:05 修改

阅读量252

点赞数 2

分类专栏： 005.VUE框架文章标签： vue.js

于 2020-08-23 19:05:31 首次发布

本文链接：https://blog.csdn.net/loveEveryWeb/article/details/108184278

版权

005.VUE框架专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Vue基础知识

Vue 简单介绍
Vue 引入
Vue 内置指令
Vue 自定义指令
Vue 最常用的生命周期函数
data & 过滤器 & 计算属性
axios
国际化： vue-i18n
总结

Vue 简单介绍

Vue 作为目前最受欢迎的前端框架，上手难度低，采用 axios 作为前后台交互方式，Vue-router 作为路由，vuex 管理数据流，Vue-i18n 进行语言切换，拥有生命周期、及组件系统，采用 webpack 全家桶打包优化性能，结合 UI 框架 elementUI，让前端开发变得更为简单，便捷；

Vue 官网：https://cn.vuejs.org/v2/guide/
Vue-router 官网：https://router.vuejs.org/zh/guide/
axios 文档：http://www.axios-js.com/zh-cn/docs/
Vue-i18n 官网：http://kazupon.github.io/vue-i18n/started.html#html
Vuex : https://vuex.vuejs.org/zh/

Vue 引入

如果是开发项目，需要采用 Vue-cli 脚手架 (https://cli.vuejs.org/zh/guide/ ) 进行开发，自己学习可以通过 js 的形式进行 Vue 引入，本文只做基础学习，所以采用 js 形式进行 Vue 引入：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div>{{ message }}</div>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // 数据
                message: 'hello vue !'
            },
            methods: {
                // 方法
            }
        });
    </script>
</body>

</html>

Vue 内置指令

{{}} 、v-text 、 v-html

<div id="app">
	<div>{{ message }}</div>    <!-- hello vue ! -->
	<div v-text="message"></div><!-- hello vue ! -->
	<div v-html="message"></div><!-- hello vue ! -->
</div>

var app = new Vue({
    el: '#app',
    data: {
        // 数据
        message: 'hello vue !'
    },
    methods: {
        // 方法
    }
});

v-on: 、@

<div id="app">
   <div v-on:click="hello()">点击</div>    <!-- 点击，控制台输出：'hello vue !' -->
   <div @click="hello()">点击</div>    <!-- 点击，控制台输出：'hello vue !'，最常用 -->
   <a href="https://www.baidu.com/" @click.prevent="hello()">阻止默认事件</a>
</div>

var app = new Vue({
    el: '#app',
    data: {
        // 数据
    },
    methods: {
        // 方法
        hello(){
            console.log('hello vue !');
        }
    }
});

v-bind: 、：

<div id="app">
    <div v-bind:title="titleText"> hover me </div>  <!-- hover 效果展示 'i love test' -->
    <div :title="titleText"> hover me </div>    <!--  最常用 -->
</div>

var app = new Vue({
    el: '#app',
    data: {
        // 数据
        titleText: 'i love test'
    },
    methods: {
        // 方法
    }
});

v-model

<div id="app">
    <div>{{ msg }}</div>
    <input type="text" v-model="msg">   <!-- 双向数据绑定，'i love vue' -->
</div>

var app = new Vue({
    el: '#app',
    data: {
        // 数据
        msg: 'i love vue'
    },
    methods: {
        // 方法
    }
});

v-for

<div id="app">
    <p v-for="(item, index) in list" :key="index">{{item}} ---- {{index}}</p>
    <!-- 
        元素一 ---- 0
        元素二 ---- 1
        元素三 ---- 2
        元素四 ---- 3 
    -->
</div>

var app = new Vue({
    el: '#app',
    data: {
        // 数据
        list: ['元素一', '元素二', '元素三', '元素四'],
    },
    methods: {
        // 方法
    }
});

v-if、v-show

<div id="app">
    <span v-if="flag">隐藏元素</span>   <!-- 移除、添加形式 -->
    <span v-show="flag">隐藏元素</span> <!-- display:none / block -->
</div>

var app = new Vue({
    el: '#app',
    data: {
        // 数据
        flag: false
    },
    methods: {
        // 方法
    }
});

Vue 自定义指令

Vue 自定义指令用于：简单的操作DOM、修改样式、不依赖数据的功能

<input type="text" v-focus>

//自定义指令
Vue.directive('focus', {
    //立即执行，only one 
    bind() {},
    //将指令插入dom中时执行
    inserted: function (el) {
        el.focus();
    },
    //组件更新时会触发
    updated() {}
})

Vue 最常用的生命周期函数

created()： data、methods 都已经被初始化好了，init data 使用
mounted()：模板挂载完成可以操作DOM了
beforeDestroy()：卸载监听事件、清理定时器使用，避免页面不必要的性能消耗

var app = new Vue({
    el: '#app',
    data: {
        msg: 'some message'
    },
    created() {
        //data、methods 都已经被初始化好了、请求数据等操作
        console.log(this.msg);
    },
    mounted() {
        //模板挂载完成 可以操作DOM了   
    },
    //组件销毁、清除定时器、取消监听事件等
    beforeDestroy() {

    },
});

data & 过滤器 & 计算属性

data：放数据的容器，值不会自己改变；

过滤器：对 data 数据做简单处理，值刷新，会自动更新；

<div id="app">
    <div>{{newday | data1 }}</div>
</div>

 //自定义过滤器
Vue.filter('data1', function (data) {
    var d = new Date(data);
    var y = d.getFullYear();
    var m = d.getMonth() + 1;
    var day = d.getDate();

    return `${y}-${m}-${day}`;
});

计算属性：对数据进行监听，有值修改，就会重新计算；

<div id="app">
    <input type="text" v-model="input1"> +
    <input type="text" v-model="input2"> =
    <input type="text" v-model="input3">
</div>

var app = new Vue({
   el: '#app',
   data: {
       input1: 0,
       input2: 0,
   },
   computed: {
       'input3': function () {
           return parseInt(this.input1) + parseInt(this.input2);
       }
   },
});

axios

具体用法请参考文档http://www.axios-js.com/zh-cn/docs/，本文仅模拟一个 get 接口：

<div id="app">
    <h2> axios </h2>
    <div v-if="isLoading">数据加载中。。。</div>
    <div v-if="!isLoading">
        <p v-for="(item, index) in axiosGetDataArr" :key="index">{{item.name}} ---- {{index}}</p>
    </div>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        	// 存放数据使用
            axiosGetDataArr: [],
            isLoading: true,
        },
        methods: {
            getData() {
                let that = this;
                that.isLoading = true;
                setTimeout(() => {
                	// test.json 文件
                	//{
    				// 	"results": [
				    //   	{"name": "zhangsan", "age": "18"},
				    //   	{"name": "zhangsan2", "age": "18"},
				    //   	{"name": "zhangsan3", "age": "18"}
				    // 	]
					//}
                    axios.get('./test.json')
                        .then(function (response) {
                            that.isLoading = false;
                            that.axiosGetDataArr = response.data.results;
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }, 3000);

            },
        },
        created() {
            this.getData();
        },
    });
</script>

国际化： vue-i18n

本文采用 js 方式引入 vue-i18n 文件： http://kazupon.github.io/vue-i18n/started.html#html

<div id="app">
    <button @click="changeLanguage()">{{ $t('common.changeLanguageBtn') }}</button>
    <div>{{ $t('common.test1') }}</div>
</div>

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script>

    Vue.use(VueI18n);
    
    const i18n = new VueI18n({

        locale: 'zh', // 定义默认语言为中文 

        messages: {

            'zh': {
                "common": {
                    "test1": "你好，i18n！",
                    "changeLanguageBtn": "切换语言"
                }
            },

            'en': {
                "common": {
                    "test1": "hello, i18n !",
                    "changeLanguageBtn": "Change Language"
                }
            }

        }

    });

    var app = new Vue({
        el: '#app',
        data: {},
        methods: {
            changeLanguage() {

                if (this.$i18n.locale === "en") {
                    this.$i18n.locale = "zh"
                } else {
                    this.$i18n.locale = "en";
                }

            }
        },
        i18n,
    });
</script>

总结

Vue 学习基础部分包括：指令、生命周期、过滤器、计算属性、axios、国际化等内容；
后续博主会继续更新基础模块的组件、路由、vuex 等知识；

豚豚鼠

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
001-基础知识

Vue 随笔 -- 基础知识Vue 简单介绍Vue 引入Vue 内置指令Vue 自定义指令Vue 最常用的生命周期函数data & 过滤器 & 计算属性axios国际化： vue-i18n总结Vue 简单介绍Vue 作为目前最受欢迎的前端框架，上手难度低，采用 axios 作为前后台交互方式，Vue-router 作为路由，vuex 管理数据流，Vue-i18n 进行语言切换，拥有生命周期、及组件系统，采用 webpack 全家桶打包优化性能，结合 UI 框架 elementUI，让前端
复制链接

扫一扫