Vue基础

最新推荐文章于 2023-01-08 17:49:54 发布
最新推荐文章于 2023-01-08 17:49:54 发布
阅读量473 收藏
点赞数
分类专栏： Vue基础 文章标签： vue.js javascript 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qioooba/article/details/127190169
版权

模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识vue</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       <h1>插值语法</h1>
       <h3>hello  {{name}}</h3>

       <h1>指令语法</h1>
       <a v-bind:href="school.url.toUpperCase()" x="hello"> 点我去{{school.name}}学习</a>
       <a :href="school.url">点我去{{school.name}}</a>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            name:'aa',
            school:{
                name:'尚硅谷',
                url:'http://www.baidu.com'
            }
            
        }
    })
    </script>
</body>
</html>

数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        单向数据绑定:<input type="text" :value="name"> <br/>
        双向数据绑定:<input type="text" v-model="name"> <br/>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    new Vue({
        el:'#root',
        data:{
            name:'aa'
        }
    })
    
    </script>
</body>
</html>

el与data的两种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>你好 {{name}}</h1>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    // const v = new Vue({
    //     //el:'#root', //第一种写法
    //     data:{
    //         name:'aa'
    //     }
    // })
    // console.log(v)
    // v.$mount('#root')   

    new Vue({
        el:'#root',
        // data:function(){
        //     return{
        //         name:'sss'
        //     }
        // }
        data(){
            console.log('@@@',this)
            return{
                name:'sss'
            }
        }
    })
    </script>
</body>
</html>

1事件的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>你好 {{name}}</h1>
        <button v-on:click = "showInfo">点我提示信息</button>
        <button @click = "showInfo1">点我提示信息</button>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    

    new Vue({
        el:'#root',
        data:{
            name:'aa'
        },
        methods:{
            showInfo(){
                alert('22222')
            },
            showInfo1(){
                alert('22222')
            }
        }
    })
    </script>
</body>
</html>

08计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       姓<input type="text" v-model:value="firstName"><br/>
       名<input type="text" v-model:value="lastName"> <br/>
       姓名: <span>{{firstName}}--{{lastName}}</span>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    

    new Vue({
        el:'#root',
        data:{
            firstName:'qi',
            lastName:'jun'
        }
    })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       姓<input type="text" v-model="firstName"><br/>
       名<input type="text" v-model="lastName"> <br/>
       姓名: <span>{{fullName()}}</span>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    

    new Vue({
        el:'#root',
        data:{
            firstName:'qi',
            lastName:'jun'
        },
        methods:{
            fullName(){
                return this.firstName + this.lastName
            }
        }
    })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       姓<input type="text" v-model="firstName"><br/>
       名<input type="text" v-model="lastName"> <br/>
       姓名: <span>{{fullName}}</span> <br/>
       姓名: <span>{{fullName}}</span> <br/>
       姓名: <span>{{fullName}}</span> <br/>
       姓名: <span>{{fullName}}</span> <br/>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    

    new Vue({
        el:'#root',
        data:{
            firstName:'qi',
            lastName:'jun',
        },
        computed:{
            fullName:{
                get(){
                    return this.firstName + '-' + this.lastName
                },
                set(value){
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }
        }
    })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
       姓<input type="text" v-model="firstName"><br/>
       名<input type="text" v-model="lastName"> <br/>
       姓名: <span>{{fullName}}</span> <br/>
       姓名: <span>{{fullName}}</span> <br/>
       姓名: <span>{{fullName}}</span> <br/>
       姓名: <span>{{fullName}}</span> <br/>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    

    new Vue({
        el:'#root',
        data:{
            firstName:'qi',
            lastName:'jun',
        },
        computed:{
            fullName(){
                return this.firstName + '-' + this.lastName
            }
             
        }
    })
    </script>
</body>
</html>

监视属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>今天的天气很{{info}}</h1>
        <button @click="changeWeather">切换</button>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    
    new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
            return this.isHot ? '炎热' :'凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
    })
   
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>今天的天气很{{info}}</h1>
        <button @click="changeWeather">切换</button>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
            return this.isHot ? '炎热' :'凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        // watch:{
        //     isHot:{
        //         immediate:true,//初始化时让handler调用一下
        //         handler(newValue,oldValue){
        //             console(newValue,oldValue)
        //         }
        //     },
        //     info:{
        //         immediate:true,//初始化时让handler调用一下
        //         handler(newValue,oldValue){
        //             console(newValue,oldValue)
        //         }
        //     }
        // }
    })
   vm.$watch('isHot',{
    immediate:true,
    handler(newValue,oldValue){

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两种写法</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>今天的天气很{{info}}</h1>
        <button @click="changeWeather">切换</button>

        <hr/>

        <h3>a的值是{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a++</button>
        <h3>b的值是{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让b++</button>
    </div>

    
    <script type="text/javascript">
        Vue.config.productionTip = false
    
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true,
            numbers:{
                a:1,
                b:1
            }
        },
        computed:{
            info(){
            return this.isHot ? '炎热' :'凉爽'
            }
        },
        methods: {
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
        watch:{
            numbers:{
                deep:true,
                handler(){
                    console.log('numbers改变了')
                }
            }
            
        }
    })

    
    
    </script>
</body>
</html>

12列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2>人员列表</h2>
        <ul>
           <li  v-for="p in persons" :key="p.id">
                {{p.name}} -- {{p.age}}
           </li> 
        </ul>
        <h2>汽车信息</h2>
        <ul>
           <li  v-for="(value,k) in car" :key="k">
                {{k}} -- {{value}}
           </li> 
        </ul>



    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                persons:[
                    {id:'1',name:'xxx',age:'15'},
                    {id:'2',name:'xxxx',age:'11'},
                    {id:'3',name:'xxxxx',age:'111'}
                ],
                car:{
                    name:'xx',
                    price:'2222'
                }
            }
        })



    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input v-model="keyWord" type="text" placeholder="请输入名字">
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}--{{p.age}}-{{p.sex}}
            </li>

        </ul>



    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        //用watch实现
        // new Vue({
        //     el:'#root',
        //     data:{
        //         keyWord:'',
        //         persons:[
        //             {id:'001',name:'马东',age:'22',sex:'女'},
        //             {id:'002',name:'六三',age:'32',sex:'男'}
        //         ],
        //         filPersons:[]
        //     },
        //     watch:{
        //         keyWord:{
        //             immediate:true,
        //             handler(val){
        //                 this.filPersons = this.persons.filter((p)=>{
        //                 return p.name.indexOf(val)!== -1
        //             })
        //             }
                   
        //         }
        //     }
            
        // })

        //用computed实现
        new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'马东',age:'22',sex:'女'},
                    {id:'002',name:'六三',age:'32',sex:'男'}
                ]
            },
            computed:{
                filPersons(){
                    return  this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord)!== -1
                    })
                }
            }
        })

    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script type = "text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <input v-model="keyWord" type="text" placeholder="请输入名字">
        <button @click="sortType =1">升序</button>
        <button @click="sortType =2">降序</button>
        <button @click="sortType =0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPersons" :key="index">
                {{p.name}}--{{p.age}}-{{p.sex}}
            </li>

        </ul>



    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        
        //用computed实现
        new Vue({
            el:'#root',
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'马东',age:'22',sex:'女'},
                    {id:'002',name:'六三',age:'32',sex:'男'}
                ],
                sortType:0
            },
            computed:{
                filPersons(){
                    const arr =  this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord)!== -1
                    })
                    if(this.sortType){
                        arr.sort((p1,p2) =>{
                            return this.sortType > 1 ? p2.age-p1.age : p1.age-p2.age
                        })
                    }
                    return arr
                }
            }
        })

    </script>
</body>
</html>
Qioooba
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础培训PPT课件.ppt
03-01
Vue基础培训，Vue基础培训课件，Vue基础培训PPT
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
vue基础
CHEN的博客笔记
01-08 3036
主要从导入vue组件、声明式渲染、条件与循环、处理用户输入、组件化应用构建的知识点进行代码演示记录
Vue 基础
roydon
10-11 4350
vue2基础
vue基础教程
shiyzhang
07-24 2688
vue基础教程，带你走进vue
vue基础知识汇总
yuandawang的博客
01-06 5802
vue基础知识汇总
Vue基础知识测试
简单点的博客
10-18 5807
Vue基础知识测试
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
Vue基础1
01-07
基础属性 el： 表示new的vue实例所要控制的区域。 data ： 表示new的vue实例所要控制的区域。 methds: 定义vue实例中所有的可用方法。 基础标签 v-clock：解决网速慢引起的标签显示问题， 仅仅替换自己的站位符中的...
vue基础知识-菜鸟入门
01-03
vue基础
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue基础项目
09-11
本资源是vue项目基本需要用到的依赖，有axios、babel-polyfill、jquery、vue-wechat-title、sass-loader、url-search-params-polyfill等
Vue基础配置讲解
10-15
在本篇文章里小编给大家整理的是关于Vue基础配置讲解内容，有兴趣的朋友们可以学习下。
基于vue基础实现的记事本
09-24
对用户的数据的增删
vue基础框架.zip
05-23
vue,element,vuex基础框架
vue基础入门及示例
08-22
此为学习Vue官网基础的示例代码
vue基础知识面试题.zip 包含 vue2 和 vue3
最新发布
01-23
vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 vue基础知识面试题.zip 包含 vue2 和 vue3 ...
Vue基础笔记111111111
08-11
Vue基础笔记学习
Vue基础、vue实战
05-17
以下是Vue的基础知识： 1. 数据绑定：Vue使用双向数据绑定来实现视图和数据的同步更新。 2. 组件化：Vue允许开发人员将应用程序拆分成多个可重用的组件。 3. 指令：Vue提供了一系列指令，用于操作DOM元素的属性和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值