Vue前端尝鲜(基本入门了解)

最新推荐文章于 2024-08-29 14:26:44 发布

weixin_34400525

最新推荐文章于 2024-08-29 14:26:44 发布

阅读量86

点赞数

文章标签：前端 webpack 后端 ViewUI

原文链接：https://juejin.im/post/5b6b90c8f265da0f9628b720

版权

1.介绍

简单来说，Vue是一套渲染UI的强大前端框架。

官网地址:https://cn.vuejs.org/
复制代码

2.主要特性：

- 学习曲线非常平缓，只要有html/css，js基础即可上手
- 响应式的支持，让我们从传统的JQuery的面向DOM编程，转变为面向数据编程
- 丰富的语法支持
- 优雅的单文件组件
- 完善的组件动画支持
- 成熟的生态，比如vue-cli，VueRouter，Vuex等相关配套的工具

其中，最重要最核心的特性就是：响应式和组件化。
复制代码

3.安装

官方文档：https://cn.vuejs.org/
复制代码

4.根据官方文档的语法，自己实现一个ToDoList。

<body>
       <div id="app">
            <h3>添加今日要完成任务</h3>
            <input type="text" v-model="currentInput" /><button @click="handleAdd">添加</button>
           <ul>
               <li v-for="item in todos" :class="{done:item.isDone}" >
                   {{item.text}}
                   <button @click="handleComplete(item)" >标记完成</button>
                   <button @click="handleDelete(item)">删除</button>
               </li>
           </ul>
       </div>
</body>
<style>
    .done{
        background-color: red;
    }
</style>
<script>
    
    let vm = new Vue({
        el:'#app',
        data:{
           todos:[],
           currentInput:""
        },
        methods:{
            handleAdd(){
                //判断是否为空
                if(this.currentInput === ""){
                    return ;
                }
                //检查是否有重复的内容
                for(let i=0;i<this.todos.length;i++){
                    //数组中的每一项
                    let item = this.todos[i];
                    //判断是否有重复
                    if(item.text === this.currentInput){
                        return;
                    }
                }
                //获取输入项的内容,将输入项的内容存到todos
                this.todos.push({text:this.currentInput,isDone:false});
                //清空输入项的内容
                this.currentInput = ""
            },
            handleComplete(item){
                item.isDone = true;
            },
            handleDelete(item){
                //从todos中删除这个item
                let index = this.todos.indexOf(item);
                //调用数组中删除的方法
                this.todos.splice(index,1);
            }
        }
    });
</script>
</html>
复制代码

5.组件注册：组件的注册有全局注册和局部注册两种方式。全局不适用，这里不举例，具体可看官网。

<script>
    <!--定义局部组件-->
    let TitleBar = {
        name:'title-bar',
        template:`<div><h1>{{title}}标题部分</h1></div>`,
        data(){
            return {
                title:'首页'
            }
        }
    }

    /*定义一个局部组件*/
    let MenuBar = {
        name:'menu-bar',
        template:`<div><h1>底部菜单部分</h1></div>`
    }
    //根实例
    let vm = new Vue({
        el:'#app',
        components:{
            TitleBar,
            MenuBar
        }
    });
</script>
复制代码

6.父子组件数据通信：从父到子，用props；从子到父，用$emit。

<div id="app">
    <ul>
        <li v-for="item,index in list"><todo-item :content="item" :index='index' @delete-item="handleDeleteItem"></todo-item></li>
    </ul>
    <child :text="text"></child>
</div>
<script>
    // 全局注册
    Vue.component("todo-item", {
        props:['content','index'],
        data() {
            return {

            }
        },
        template: "<div @click='handlerClick'>{{content}}</div>",
        methods: {
            handlerClick(){
                this.$emit("delete-item", this.index);
            }
        }
    });

    // 子组件不要去直接修改父组件的数据
    Vue.component("child", {
        props:['text'],
        data() {
            return {
                myText: this.text
            }
        },
        template: "<div @click='changeText'>{{myText}}</div>",
        methods: {
            changeText(){
                this.myText = "修改了的文字";
            }
        }
    });


    let vue = new Vue({
        el: "#app",
        data: {
            list: [
                "吃饭", "睡觉", "打豆豆"
            ],
            text: "文字"
        },
        methods:{
            handleDeleteItem(index){
                this.list.splice(index, 1);
            }
        }
    });
</script>
复制代码

其余知识点可参考官方文档。

以下介绍Vue-cli

1.介绍：

Vue-cli就为了做项目开发问题而生的，它给我们打包好了所有能用到的好工具，提供一个开箱即用的项目开发环境。所以，我们需要用它来创建项目。
复制代码

2.资源：

vue-cli官网：https://cli.vuejs.org/，官网写的是3.0版本的使用，2.xx才是稳定版。

vue-cli github主页：https://github.com/vuejs/vue-cli
复制代码

3.创建工程

npm install -g vue-cli
vue init webpack xxx

?Project name lottery
?Project description this is a niubility project
?Author xiaokaikai
?Vue build (选择一种构建的形式)
> Runtime + Compiler: recommended for most users
?Install vue-router?(Y/n) Y  --这里说是否安装路由插件
?Use ESLint to lint your code? N-- 是否检查代码格式
?Pick an ESLint preset Standard  -- 选择一种代码检查的规范
?Set up unit tests  N  是否进行单元测试
?Setup e2e tests with Nightwatch N 是否使用e2e工具进行构建
?Should we run 'npm install' for you after the project has been created? npm --选择npm方式安装

输入完成之后,工具就开始构建我们的工程啦!
复制代码

4.工程目录结构

- build：构建相关目录
- config：开发相关配置
- src：要编写的代码
- static：不需要webpack处理的静态文件，比如压缩后的资源,可以直接访问
复制代码

5.Vue-Router

传统的路由是后端来做，简单说就是请求一个url，后端根据请求的参数内容渲染出相应的html返回。由于JS可以感知到浏览器URL的变化，因此可以做到在url变化的时候去加载不同的DOM内容，这就是前端路由，和后端没有任何关系了。

单页应用(SPA)的用户体验比传统的多页应用要好很多，所以越来越多的公司开始尝试单页应用。单页应用就将原来的多个页面做成一个html，JS根据url的变化切换DOM的内容。这样不用再去请求服务器的整个html内容，只需要请求对应的json数据，因此速度会快很多。

Vue-Router为前端路由提供了封装和简化，并结合组件的使用。让我们可以一个url对应一个组件，轻松编写大型的SPA应用。

<router-view> 显示当前路径所对应的组件内容
<router-link to="要跳转去的组件的路径">
复制代码

自己基本小总结，具体参考文档资料，文档比较全，又是中文的。

根实例 : let vm = new Vue({参数})
el
template
data
methods
computed
watch
props
生命周期钩子

vue中属性
v-model
v-show
v-if
v-else-if
v-else

v-for
v-html
v-text

使用属性:  :属性名称

绑定事件:@事件名称 

全局组件和局部组件

父子组件之间通讯
父-->子 : props
子 --> 父: $emit(事件名称)

@click.native 组件绑定原生事件

动态组件: <component :is=组件的名称

复制代码

weixin_34400525

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue前端尝鲜(基本入门了解)

1.介绍简单来说，Vue是一套渲染UI的强大前端框架。官网地址:https://cn.vuejs.org/复制代码2.主要特性：- 学习曲线非常平缓，只要有html/css，js基础即可上手- 响应式的支持，让我们从传统的JQuery的面向DOM编程，转变为面向数据编程- 丰富的语法支持- 优雅的单文件组件- 完善的组件动画支持- 成熟的生态，比如vue-cli，VueRout...
复制链接

扫一扫