VUE新手入门

最新推荐文章于 2023-07-03 18:20:50 发布

陈斌-cb

最新推荐文章于 2023-07-03 18:20:50 发布

阅读量214

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/cbbgs_cb/article/details/119357814

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue

1 第一个vue程序

1.1 引入vue包

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1.2 创建一个div

    <div id="box">
        <p>{{myname}}</p>
    </div>

1.3 创建一个vue对象

<script>
       var vm =  new Vue({
            el:"#box" ,//vue渲染开始的地方
            data:{
                //状态
                myname:"chenbin"
            }
        })

2 v-html

绑定带有标签的


<body>
    <div id="box">
        <p v-html="myhtml"></p>
    </div>

<script>
       var vm =  new Vue({
            el:"#box" ,//vue渲染开始的地方
            data:{
                myhtml:"<b>哈哈</b>"
            }
        })
    </script>

3 v-show

动态显示和隐藏

<div v-show="isShow" id="show">动态显示和隐藏</div>
<script>
  let show=  new Vue({
        el:"#show",
        data: {
            isShow:true
        }
    });

</script>

4 v-if

动态创建和删除

<div v-show="isCreate" id="create">动态创建和删除</div>
<script>
    let create=  new Vue({
        el:"#create",
        data: {
            isCreate:true
        }
    });

</script>

5 动态绑定class 三目、对象、数组

<div id="box" >
    <p style="color: red">dddddddd</p>
    <button @click="handleClaick()">click</button>
    <div :class="isActive?'color:red':'color:yellow'">动态绑定class的三目写法</div>
    <div :class="classobj">class的对象写法</div>
    <div :class="classarr">class的数组写法</div>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            isActive:false,
            classobj:{
                a:true,
                b:true
            },
            classarr:['a','c']
        },
        methods:{
            handleClaick(){
                this.isActive = !this.isActive
            }

        }
    });
</script>

6 动态绑定style三目、对象、数组

<div id="box" >
    <p style="color: red">dddddddd</p>
    <button @click="handleClaick()">click</button>
    <div :style="isActive?'color:red':'color:yellow'">动态绑定style的三目写法</div>
    <div :style="styleobj">style的对象写法</div>
    <div :style="stylearr">style的数组写法</div>
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            isActive:false,
            styleobj:{
                background:'red',
                fontSize:'30px'
            },
            stylearr:['background:yellow']
        },
        methods:{
            handleClaick(){
                this.isActive = !this.isActive
            }

        }
    });
</script>

7 v-if 和v-else,v-else-if

<div id="box">
    <button @click="handleClaick()">click</button>
    <div v-if="isCreate">条件渲染if</div>
    <div v-else="isCreate">条件渲染else</div>
    <ul v-if="isCreate">
        <li v-for="datalist in datalist">
            {{datalist}}
        </li>
    </ul>
    <ul v-else>
        <div>购物车空空如也</div>
    </ul>
<!--v-esle-if-->
    <div v-if="which===1">1111</div>
    <div v-else-if="which===2">2222</div>
    <div v-else="which===3">333</div>
</div>

<script>
    new Vue({
        el:"#box",
        data:{
            isCreate:true,
            datalist:[],
            which:1
        },
        methods:{
            handleClaick(){
                this.isCreate=!this.isCreate;
                this.datalist=['1111','2222'];
            }
        }

    });
</script>

8 v-for

<div id="box">
    <!--用in遍历数组 -->
    <ul v-for="data in arry">
        <li>{{data}}</li>
    </ul>

    <!--用in遍历数组，显示下标 -->
    <ul v-for="(data,index) in arry">
        <li>{{data}}----{{index}}</li>
    </ul>

    <!--用of遍历数组 -->
    <ul v-for="data of arry">
        <li>{{data}}</li>
    </ul>
    <!--用in遍历对象 用of遍历也可以-->
    <ul v-for="data in obj">
        <li>{{data}}</li>
    </ul>

    <!--用in遍历对象,显示key值-->
    <ul v-for="(data,key) in obj">
        <li>{{data}}----{{key}}</li>
    </ul>

    <script>
        new Vue({
            el:"#box",
            data:{
                arry:['111','333','555'],
                obj:{
                    name:'zzhangshan',
                    sex:'男',
                    age:12

                }
            }
        });
    </script>
</div>

9 过滤

<div id="box">

    <!-- @input  只要value改变，就会触发-->
    <!--v-model 用于双向绑定传值-->
    <input type="text" @input="hanldInput()" v-model="mytext"/>
    <ul  v-for="data in datalist">
        <li>
            {{data}}
        </li>
    </ul>
</div>


<script>
    new Vue({
        el:"#box",
        data:{
            mytext:'',
            datalist:['qqq','aaa','acc','ccc','bbbb'],
            list:['qqq','aaa','acc','ccc','bbbb']
        },
        methods:{
            hanldInput(){
              //  console.log("只要value改变，就会触发")
                /*
                filter是用于过滤，indexOf()是用来判断一个字符是不是在一个字符串中， 是返回0，不是返回-1
                * */
                var newlist=this.list.filter(item=>item.indexOf(this.mytext)>-1);

               this.datalist=newlist;
                console.log(newlist)
            }
        }

    });
</script>

10 事件处理器

<div id="box">
    <button @click="handleClick">click</button>  <!--只写函数名-->
    <button @click="handleClick()">click</button>  <!--写函数名带上（）-->
    <button @click="handleClick($event)">click</button>  <!--跟参数-->
    <button @click="isShow=!isShow">click</button>  <!--如果方法体简单就直接写在里面，不推荐这种写法-->
    <div v-show="isShow">111111</div>
</div>
    <script>
        new Vue({
            el:"#box",
            data:{
                isShow:true
            },
            methods:{

                handleClick(){
                    this.isShow=!this.isShow;
                }

            }
        });
    </script>

11 事件修饰符

<div id="box">
    
    <ul  @click.self="handleClick">  <!--只执行父类的-->
        <li @click.stop="handleClick">11111</li>  <!--只执行子类的点击事件，不会向父类冒泡-->
        <li @click.once="handleClick">22222</li>  <!--这个链接只会有一次点击有效-->
    </ul>
    
</div>

12 按键修饰符

<div id="box">
  <input type="text" @keyup.enter="handleClick"> <!--按回车触发，还可以把enter换成按键对应的数值-->
</div>
    <script>
        new Vue({
            el:"#box",
            methods:{
                handleClick(){
                    console.log("事件被触发了");
                }

            }
        });
    </script>

13 表单绑定 v-model

<div id="box">
    <!--利用v-model来对数据进行双向绑定，不在需要value-->
    <input type="text" v-model="mytext">{{mytext}}
    <!--单选 v-model的初始值为布尔值-->
    <input type="checkbox" v-model="isCheck">记住我  <!--如果isCheck值是true这个单选框会被自动勾选  单选为布尔值-->
    <!--多选 v-model的初始值为数组，并且用value来唯一标识区分-->
    <input type="checkbox" v-model="checks" value="游泳">游泳
    <input type="checkbox" v-model="checks" value="滑冰">滑冰
    <input type="checkbox" v-model="checks" value="跳舞">跳舞
    <br/>
          {{checks}}
<br/>

    <!--单项绑定-->
    你最喜欢的语言
    <input type="radio" v-model="checkone" value="php">php
    <input type="radio" v-model="checkone" value="java">java
    <input type="radio" v-model="checkone" value="c">c

    <br/>
    你最喜欢的：{{checkone}} 
    <!---->
</div>

<script>
    let vm=new Vue({
        el:"#box",
        data:{

            /*需要在vue里面对v-model的值进行初始化*/
            mytext:'',
            isCheck:false,
            checks:[],
            checkone:''

        }
    })
</script>

表单绑定修饰符

    <div id="box">
        <!--在按回车才会出现-->
        <input type="text" v-model.lazy="mytext">
      <!--  只显示输入的数字-->
        <input type="text" v-model.number="mytext">
        <!--去空格-->
        <input type="text" v-model.trim="mytext">


        {{mytext}}
    </div>

<script>
    new Vue({
        el:"#box",
        data:{
            mytext:''
        }
    });
</script>

14 购物车


<div id="box">
    全选：<input type="checkbox" @change="handleClick()" v-model="isCheckAll">
    <ul v-for="data in datalist">
        <li>
            <input type="checkbox" v-model="checkgroup" :value="data" @change="handleLiclick()">
            {{data}}
            <button @click="handledelClick(data)">-</button>
            {{data.number}}
            <button @click="data.number++">+</button>
        </li>

    </ul>

    {{checkgroup}}<br>

    <!--这里必须是一个函数要加括号-->
    总金额：{{ getSum() }}
</div>
<script>
    new Vue({
        el:"#box",
        data:{
            datalist:[
                {
                    name:'苹果',
                    price:10,
                    number:2,
                    id:'1'
                },
                {
                    name:'香蕉',
                    price:20,
                    number:1,
                    id:'2'
                },
                {
                    name:'梨',
                    price:30,
                    number:3,
                    id:'3'
                }
            ],
            checkgroup:[],
            isCheckAll:false
        },
        methods:{

            /*计算总金额*/
            getSum(){
                var sum=0;
                for(i in this.checkgroup){
                    sum+=this.checkgroup[i].price*this.checkgroup[i].number
                }
                return sum;
            },
            /*全选和全不选*/
            handleClick(){
                if(this.isCheckAll){
                    /*如果为全选，则勾选的数据为所有数据*/
                    this.checkgroup=this.datalist
                }else {
                    this.checkgroup=[]
                }
            },
            /*判断每一件商品是否被勾选*/
            handleLiclick(){
                /*如果勾选的长度等于总长度则是全选*/
                if(this.checkgroup.length===this.datalist.length){
                    this.isCheckAll=true
                }else {
                    this.isCheckAll=false
                }
            },
            /*计算数据减*/
            handledelClick(data){
                if(data.number==1){
                    data.number=1;
                }else {
                    data.number--;
                }
            }
        }

    });
</script>

15 axios

<div id="box">
    <button @click="handleClick()">click</button>
    <ul v-for="data in datalist">
        <li>{{data.book.name}}</li>
        <img :src="data.book.img">
    </ul>
</div>
<script>

    new Vue({
        el:"#box",
        data:{
            datalist:[]
        },
        methods:{
            handleClick(){
                /*get请求*/
                axios.get('/user?ID=12345').then(res=>{
                    console.log(res.data.data.books)//自动包装data属性
                    this.datalist=res.data.data.books
                }).catch(error=>{
                    console.log(error)
                })


                /*post请求*/
                axios.post('/user', {
                    firstName: 'Fred',
                    lastName: 'Flintstone'
                })
                    .then(res=> {
                        console.log(res);
                    })
                    .catch(error=> {
                        console.log(error);
                    });

            }
        }
    });


</script>

16 计算属性

1、计算属性，当依赖的值发生变化时，计算属性会从新计算一遍
2、多处调用计算属性时，会将计算属性的结果缓存，直接调用缓存的值即可，不会再调用一遍方法

<div id="box">

    <!--计算属性不用加括号，普通方法才需要-->
    {{handleClick}}
</div>
<script>
  let vm=  new Vue({
        el:"#box",
        data:{
            sum:12
        },
        /*计算属性*/
     
        computed:{
            handleClick(){
                return this.sum*this.sum
            }
        }
    });
</script>

17 计算属性之模糊查询

<div id="box">

    <!-- @input  只要value改变，就会触发-->
    <!--v-model 用于双向绑定传值-->
    <input type="text" @input="hanldInput()" v-model="mytext"/>
    <ul  v-for="data in handleClick">
        <li>
            {{data}}
        </li>
    </ul>
</div>


<script>
    new Vue({
        el:"#box",
        data:{
            mytext:'',
            datalist:['qqq','aaa','acc','ccc','bbbb'],
         

        /*计算属性*/
        computed:{
            handleClick(){
                  /!*
                filter是用于过滤，indexOf()是用来判断一个字符是不是在一个字符串中， 是返回0，不是返回-1
                * *!/
                return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
            }
        }

    });
</script>

18 组件

注意三点：

1、自定义组件需要一个root element
2、父子组件的data不能互通
3、组件也可以用 data,compoted,methods,但是data必须是一个函数

<div id="box" >
   <navrbar></navrbar>
</div>
<script>

    /*定义全局组件*/
    Vue.component("navrbar",{
        template:`
            <div>
                <div><button @click="handleClick()">返回</button></div>{{list}}
                <navrbarchild></navrbarchild>
                <div><button>主页</button></div>
            <child></child>
            </div>
        `,

        /*局部组件的定义*/
        component:{
            navrbarchild:
                `
                <div>我是navbar专属的子节点组件</div>
                `

        },
        method:{
            handleClick(){
                console.log("我是返回！")
            }
        },
        /*这是和new Vue(){}中data的区别，在这里data必须是个函数*/
        data(){
            return{
                list:"dddddd"
            }
        }

    })
    /*全局定义的子节点,任意一个全局定义的组件都可以使用*/
    Vue.component("child",{
        template:`
            <div>我是全局定义的子节点</div>
        `
    })
    new Vue({
        el:"#box"
    });
</script>

19 父传子

1、在全局定义组件中用props:[]进行接受父组件的自定义属性，用父组件自定义属性的值来替换父组件定义时候的文字显示,最好是通过属性验证来规范自定义属性值的输入
2、父组件的自定义属性
3、如果父组件的自定义属性值为data中的数据时，需要进行绑定，用冒号
4、当解析成布尔值的时候需要添加绑定，不然会解析成字符串

<div id="box">
    <!--父组件自定义一个属性，myname-->
    <navbar myname="home" :isshow="true"></navbar>
    <!--如果myname的值是data里面的数据，则需要数据绑定，用冒号：-->
    <!--这个fatherdata就是data中的数据-->
    <navbar :myname="fatherdata" :isshow="true"></navbar>

    <!--这个:isshow="false" 如果不加冒号进行绑定，会解析成字符串，在v-show="isshow"的时候会解析失败-->
    <navbar myname="left" :isshow="false"></navbar>
</div>
<script>
    Vue.component("navbar",{
        template:`
            <div>
                <button>返回</button>
                    navbar --{{myname}}

                <button v-show="isshow">首页</button>
            </div>

        `,
        /*接受父组件传来的信息,名字与父组件中自定义的属性名一致*/
       // props:['myname','isshow']
         /*属性验证,通过属性验证来规范自定义属性值的输入*/
        props:{
            myname:String,
            isshow:Boolean
        }
    })

    new Vue({
        el:"#box",
        data:{
            fatherdata:"这是父组件的信息"
        }
    });
</script>

20 生命周期方法

//===创建时的四个事件
beforeCreate() { // 第一个被执行的钩子方法：实例被创建出来之前执行
 console.log(this.message) //undefined
 this.show() //TypeError: this.show is not a function
 // beforeCreate执行时，data 和 methods 中的 数据都还没有没初始化
},
created() { // 第二个被执行的钩子方法
 console.log(this.message) //床前明月光
 this.show() //执行show方法
 // created执行时，data 和 methods 都已经被初始化好了！
 // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
},
beforeMount() { // 第三个被执行的钩子方法
 console.log(document.getElementById('h3').innerText) //{{ message }}
 // beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中
},
mounted() { // 第四个被执行的钩子方法
 console.log(document.getElementById('h3').innerText) //床前明月光
 // 内存中的模板已经渲染到页面，用户已经可以看见内容
},
//===运行中的两个事件
beforeUpdate() { // 数据更新的前一刻
 console.log('界面显示的内容：' + document.getElementById('h3').innerText)
 console.log('data 中的 message 数据是：' + this.message)
 // beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染
},
updated() {
 console.log('界面显示的内容：' + document.getElementById('h3').innerText)
console.log('data 中的 message 数据是：' + this.message)
 // updated执行时，内存中的数据已更新，并且页面已经被渲染
}

21 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库

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

HTML

<div id="app">
 <h1>Hello App!</h1>
 <p>
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <router-link to="/">首页</router-link>
 <router-link to="/student">会员管理</router-link>
 <router-link to="/teacher">讲师管理</router-link>
 </p>
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
</div>

<script>
 // 1. 定义（路由）组件。
 // 可以从其他文件 import 进来
 const Welcome = { template: '<div>欢迎</div>' }
 const Student = { template: '<div>student list</div>' }
 const Teacher = { template: '<div>teacher list</div>' }
 // 2. 定义路由
 // 每个路由应该映射一个组件。
 const routes = [
 { path: '/', redirect: '/welcome' }, //设置默认指向的路径
 { path: '/welcome', component: Welcome },
 { path: '/student', component: Student },
 { path: '/teacher', component: Teacher }
 ]
 // 3. 创建 router 实例，然后传 `routes` 配置
 const router = new VueRouter({
 routes // （缩写）相当于 routes: routes
 })
 // 4. 创建和挂载根实例。
 // 从而让整个应用都有路由功能
 const app = new Vue({
 el: '#app',
 router
 })
 // 现在，应用已经启动了！
</script>

22 axios

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端在浏览器中可以帮助我们完成 ajax请求的发送在node.js中可以向远程接口发送请求

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

注意：测试时需要开启后端服务器，并且后端开启跨域访问权限

<script>
   new Vue({
      el: '#app',
      //固定的结果

      data: {
         userList:[]
      },
      created(){
         //调用方法,在页面渲染之前执行
         this.getuserList()

      },
      methods:{
         //定义方法
         getuserList(){
            axios.get("asios.json")
            .then(res=>{
               //res就是返回的数据，
                //真正的数据在res的data里面
               this.userList=res.data

            })
            .catch(error=>{

            })
         }
      }

   
      })

23 element-ui：

element-ui 是饿了么前端出品的基于 Vue.js的后台组件库，方便程序员进行页面快速布局和构建

官网： http://element-cn.eleme.io/#/zh-CN

会嫖就行了

24 Vue脚手架

24.1 安装node.js

从node官网下载并安装node，安装步骤很简单，只要一路“next”就可以了。
安装完成后，打开命令行工具输入命令*node -v*，如下图，如果出现对应版本号，就说明安装成功了。

我们所需要的npm包管理器，是集成在node中的，所以，直接输入***npm -v***就会如下图所示，显示出npm的版本信息。

到这里node的环境已经安装完了,npm包管理工具也有了，但是由于npm的有些资源被墙，为了更快更稳定,所以我们需要切换到淘宝的npm镜像——cnpm。

24.2 安装cnpm

点击进入淘宝的cnpm网站,里面有详细的配置方法。
或者直接在命令行输入：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

然后等待，安装完成。

输入cnpm -v，可以查看当前cnpm版本，这个和npm的版本还是不一样的。

使用cnpm的方法就是，需要用到npm的地方直接使用cnpm替换就可以了

24.3 vue安装

在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。vue.js 也提供配套工具来开发单文件组件。

$ cnpm install vue

24.5 安装vue-cli脚手架构建工具

vue-cli 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 vue-cli
$ cnpm install --global vue-cli

24.6 创建一个基于 webpack 模板的新项目

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。可以使用：

#my-project为自定义项目名
$ vue init webpack my-project

初始化一个项目，或使用

$ vue init webpack-simple my-project

陈斌-cb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
VUE新手入门

vue文章目录vue1 第一个vue程序1.1 引入vue包1.2 创建一个div1.3 创建一个vue对象2 v-html3 v-show4 v-if5 动态绑定class 三目、对象、数组6 动态绑定style三目、对象、数组7 v-if 和v-else,v-else-if8 v-for9 过滤10 事件处理器11 事件修饰符12 按键修饰符13 表单绑定 v-model14 购物车15 axios16 计算属性17 计算属性之模糊查询18 组件19 父传子20 生命周期方法21 路由22 axio
复制链接

扫一扫