vue基础学习记录

最新推荐文章于 2024-08-10 15:00:00 发布

昌远啊

最新推荐文章于 2024-08-10 15:00:00 发布

阅读量141

点赞数 3

分类专栏：笔记文章标签： vue js html5 javascript css3

本文链接：https://blog.csdn.net/qq_51609259/article/details/118642231

版权

笔记专栏收录该内容

13 篇文章 1 订阅

订阅专栏

第一步引包和插值表达式2021.7.10

<div id="app">
        <h1 v-text> {{ number }} </h1>
        <button v-on:click="handclick"> +1 </button>
        <div class="all" :class="{active:isActive}" > {{text1}} </div>
        <button @click="changClick">切换</button>
    </div>
<script src="./vue.js"></script>
<script>
       const vu= new Vue({
            el:'#app',//绑定的位置
            data:{//数据
                number:0,
                isActive:false,
                text1:"漂亮",
            },
            methods:{//方法
                 handclick(){
                     this.number+=1;
                 },
                 changClick(){
                     this.isActive=!this.isActive;
                        if(this.isActive){
                            this.text1="可爱";
                        }else{
                            this.text1="可可爱爱";
                        }
                 },
            },


        });
        //console.log(Math.round(-1.7));
    </script>

可以用{{值}}:这里的值可以是任何可以表达的东西。
{{ txt.split(’’).reverse().join(’’)}}:反转字符串
记得 Vue中的V是大写！！！

vue中的指令2021.7.12

v-text
v-html
v-if v-else
v-show
v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueDemo</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: green;
        }
        .active {
            background-color: pink;
        }
    </style>
</head>
<body>

    <div id="app">
        <!-- 2021 7 10  -->
        <h2> {{txt}} </h2>
        <!-- v-text= 直接在标签里面插入文本 和{{}}一样-->
        <h3 v-text="txt"></h3>
        <!-- v-html= 插入html值和标签都可以插 -->
        <h1 v-html="htmlmsg"></h1>
        <!-- 2021 7 12  -->
        <!-- v-if= v-else 就是两个放一起的使用 没有的话标签会不在初始化渲染开销少 使用次数少-->
        <h2 v-if = "Math.random()>0.5">我好大呀</h2>
        <h3 v-else> 我还是有一点小</h3>
        <!-- v-show=里面的是一个bool值 标签还在 频繁点击变换 css样式切换-->
        <h1 v-show = "show"> 我要展示</h1>
        <!-- v-bind: 绑定连接等比如style,class等。v-bind可以简写成 ：-->
        <!-- <a href="res.url">{{ res.name}}</a>错误的 -->
        <!-- <img :src="res.imgUrl" alt="加载错误"> 图片链接的用法-->
        <a v-bind:href="res.url" v-bind:title="res.title">{{ res.name}}</a>
        <h1 :class="{active:isActive}">v-bind用法</h1>
        <!-- v-on 监听dom操作 v-on:可以简写成简写@-->
        <!-- 1、扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
            2、因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，
            和 DOM 完全解耦，更易于测试。
            3、当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
         -->
        <h3>{{ number}}</h3>
        <button v-on:click="handle">+1</button>
        <button v-on:click="zeroClear">清零</button>
        <div class="box" :class="{active:isPink}"></div>
        <button @click="changeClick">变成猪pink🍖🍖</button>
        <button @click="changeClick">变成猪头pink🍖🍖</button>
        <!-- v-on 还提供了事件修饰符 -->
        <!-- v-on:click.once只执行一次 -->
        <button v-on:click.once="handle">+1</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vu = new Vue ({//注意别把data啥的单词写错
            el:"#app",
            data:{//里面写东西的时候记得要加引号
                msg:"hello",
                txt: "shabi李冬晴！",
                htmlmsg:"<h3> 23edf</h3>" ,
                show:1,
                res:{
                    name:"百度",
                    url:"https://www.baidu.com",
                    title:"百度一下",
                    imgUrl:"img/风景.png",
                },
                isActive:1,
                number:0,
                isPink:0,
            },
            methods:{//写函数也要用键值对
                handle() {
                    this.number+=1;
                },
                zeroClear(){
                    this.number=0;
                },
                // changeTopink() {
                //     this.isPink=1;
                // },
                // changeTobox() {
                //     this.isPink=0;
                // }
                changeClick() {
                    this.isPink=!this.isPink;
                }
            }
        }) ;
    </script>
</body>
</html>

vue数组渲染2021.7.18

v-for列表渲染
v-model的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">
        <!-- v-for可以快速的遍历数组里面的东西，但是注意v-for="(随便取的，index) in menus"index就是下标。
        遍历对象也是可以的。v-for="----":key="---",dom追踪你的标识不然去全部都会改变。 -->
        <div>
            <ul>
                <li v-for="(itme,index) in menus":key="index">
                    <h3>id:{{itme.id}} 菜名：{{itme.name}}</h3>
                </li>
            </ul>
        </div>
        <!-- vue的双向数据绑定v-model对应表单事件 -->
        <div>
            数据
            <h3> {{msg}} </h3>
            <!-- 这个梨子就是将msg和input标签绑定 由数据驱动试图 而输入的数据又改变msg的数据-->
            <input type="text" v-model="msg">
            <label for="checkbox"> {{checked}}  </label>
            <input type="checkbox" id="checkbox" v-model="checked">
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vu = new Vue ({
            el:"#app",
            data:{
                txt:"shabi李冬晴！",
                menus:[
                    {id:1,name:"大腰子"},
                    {id:2,name:"大肘子"},
                    {id:3,name:"大苹果"},
                    {id:4,name:"大香菇"},
                    {id:5,name:"大梨子"},
                ],
                msg:"你是傻子把！",
                checked:false,

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

vue v-model的例子和vue监听watch2021.7.19

v-model的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
</head>
<body>
    <div id="app">
      <!-- v-model的其他实列   -->
      <div class="box">
          <!-- 当勾选到的value会到你绑定的v-model模块里面去 value
          代表一个框value一样那么他勾选也会相同-->
          <label for="a">黄瓜</label>
          <input type="checkbox" id="a" value="黄瓜" v-model="checkBoxnames">

          <label for="b">南瓜</label>
          <input type="checkbox" id="a" value="南瓜" v-model="checkBoxnames">

          <label for="c">花菜</label>
          <input type="checkbox" id="a" value="花菜" v-model="checkBoxnames">

          <br/>
          <span> {{ checkBoxnames }} </span>
          <!-- 还可以与v-for连用 -->
          <select v-model="selected">
            <option v-for="option in options" v-bind:value="option.value">
              {{ option.text }}
            </option>
          </select>
          <span>Selected: {{ selected }}</span>
          <!-- v-model.lazy会有延缓数据传输的作用，当你输入完不会直接变化，当你输入完点击空白页就会有变化 -->
          <label for="inputBox"> {{inputValue}} </label>
          <input type="text" name="" id="inputBox" v-model.lazy="inputValue">
          <!-- v-model使用.number自动将输入的数据转换为数字 -->
          <input type="number" name="" id="numberBox" v-model.number="numberBox">
          <label for="numberBox"> {{numberBox}} </label>
          <!-- v-model使用.trim可以去除用户输入字符串的首尾的空格。 -->
          <input type="text" name="" id="inputValues" v-model.trim="inputValue">
          <label for="inputValues"> {{inputValue}} </label>
          <!-- 没用的时候见查看的标签会发现空格不会被去除 -->
          <label > {{msg}} </label>
          <input v-model="msg">
      </div>      
    </div>
    <script src="./vue.js"></script>
    <script>
        const vu =new Vue({
            el:"#app",
            data:{
                checkBoxnames:[],
                inputValue:"",
                selected: 'A',
                options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
                ],
                numberBox:"",
                msg:'',
                
            },
            


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

没用trim时查看

vue监听watch
计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
</head>
<body>
    <div id="app">
      <!-- vue的监听器watch -->
      <!-- 普通数据类型直接监听，但是有特殊的数据类型Object Array就要深度监视 -->
        <input type="text" v-model="msg">
        <h3> {{msg}} </h3>
        <h3> {{stus[0].name}} </h3>
        <button @click="stus[0].name ='Tom'">点击</button>
    </div>
    <div id="app1">
       <!-- 计算属性  -->
       <!-- 如果没有改变值直接取就是你一开始的值，如果你改变了值他取新的值 -->
       <!-- 最大的有点能够产生缓存 -->
        <h3> {{reverseMsg}} </h3>
        <h2> {{fullName}} </h2>
        <button @click="handleMsg">点击</button>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vu = new Vue({
            el:"#app",
            data:{
                msg:"",
                stus:[{name:"Jock"}]
            },
            watch:{
                //key是data对象的属性名 value是监听后的行为 newv新值 oldv旧的
                "msg":function(newv,oldv){
                    console.log(newv,oldv);
                    if(newv =="120") {
                        console.log("hello!");
                    }
                },
                //复杂数据类型深度监视
                "stus":{
                    deep:"true",
                    handler:function(newv,oldv) {
                        console.log(oldv[0].name);
                    },
                }
            },

        });
        const vu1 =new Vue({
            el:"#app1",
            data:{
                msg:"hello world!",
                firstName:"han chang ",
                lastName:"yuan",
            },
            methods:{
                handleMsg:function() {
                    this.msg="计算属性 computed";
                    this.lastName="yuanyuan";
                },
            },
            computed:{
                //computed 默认只有getter方法
                reverseMsg:function() {
                    return this.msg.split("").reverse().join("");
                },
                fullName:function(){
                    return this.firstName+this.lastName;
                }
            },
        });
    </script>
</body>
</html>

vue学习2021.7.20

使用computed计算属性中的setter方法
vue过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue</title>
</head>
<body>
    <div id="app">
        {{content}}
        <input type="text" v-model.trim="content1" @input="handleInput">
        <button @click="handleClick">获取</button>
        <label> {{content}} </label>
    </div>
    <script src="./vue.js"></script>
    <script>
        const vu =new Vue({
            el:"#app",

            data:{
                msg:"",
                content1:"",
            },

            methods:{
                handleInput:function(event){
                    //解构
                    const {value} =event.target;
                    this.content=value;
                },
                handleClick(){
                    if(this.content!="")
                    console.log(this.content);
                    console.log("---"+this.content1);
                },
            },

            computed:{
                //使用计算属性中的setter方法默认有getter方法
                content:{
                    set:function(newv){
                        this.msg=newv;
                    },
                    get:function(){
                        return this.msg;
                    }
                }
            },
        });
    </script>
</body>
</html>

getter方法

const language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
};

language.current = 'EN';
language.current = 'FA';

console.log(language.log);
// expected output: Array ["EN", "FA"]

setter方法

const obj = {
  log: ['a', 'b', 'c'],
  get latest() {
    if (this.log.length === 0) {
      return undefined;
    }
    return this.log[this.log.length - 1];
  }
};

console.log(obj.latest);
// expected output: "c"

vue过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习</title>
</head>
<body>
    <div id="app">
        <!-- 过滤器为数据添油加醋 -->
        <h3> {{price | myPrice}} </h3>
        <h3> {{msg | myReverse}} </h3>
    </div>
    <script src="./vue.js"></script>
    <script>
        //创建全局过滤器
        Vue.filter("myReverse",(val)=>{
            return val.split("").reverse().join("");
        });
        const vu =new Vue({
            el:"#app",
            data:{
                price:10,
                msg:"hello guolvqi"
            },
            methods:{

            },
            //局部过滤器
            filters:{
                myPrice(price){
                    return "$"+price;
                }
            }
            
        });
    </script>
</body>
</html>

音乐播放器实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐播放器案例</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        ul li{
            margin: 20px 20px;
            padding: 10px 5px;
            border-radius: 3px;
            cursor: auto;
        }
        ul li:hover {
            cursor: pointer;
        }
       .active {
            background-color: #D2E2F3;
        }
        #app {
            width: 400px;
            height: 600px;
            margin: 100px auto;
        }
        audio  {
            margin: 20px 50px;
        }
        button:hover{
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 实例总结：在写link:绑定的时候要注意不要忘记是"{active:判断条件}" -->
    <div id="app">
        <audio :src="getCurrentSongSrc" controls autoplay @ended="handleNext">酷我音乐</audio>
        <ul>
            <li :class='{active:index===currentIndex}' v-for="(item,index) in musicData":key="item.id" @click="handleClick(index)">
                <h2> {{item.id}}---{{item.name}} </h2>
                <span> {{item.author}} </span>
            </li>
            <button @click="handleNext" style="margin: 20px 175px;">下一曲</button>
        </ul>
        
    </div>
    <script src="./vue.js"></script>
    <script>
        const musicData=[
                         {id:1,name:"风之旅人",author:"阿云嘎",songSrc:"music/阿云嘎 - 风之旅人.mp3"}
                        ,{id:2,name:"静悄悄",author:"陈泫孝（大泫）",songSrc:"music/陈泫孝（大泫） - 静悄悄.mp3"}
                        ,{id:3,name:"单车",author:"陈奕迅",songSrc:"music/陈奕迅 - 单车.mp3"}
                        ,{id:4,name:"超喜欢你",author:"飞轮海",songSrc:"music/飞轮海 - 超喜欢你.mp3"}]
        const vu =new Vue({
            el:"#app",
            data:{
                musicData,
                currentIndex:0

            },
            //使用计算属性减少代码臃肿
            computed:{
                getCurrentSongSrc(){
                    return this.musicData[this.currentIndex].songSrc;
                }
            },
            methods:{
                handleClick(index) {
                    this.currentIndex=index;
                },
                handleNext() {
                    this.currentIndex++;
                    if(this.currentIndex==musicData.length){
                        this.currentIndex=0
                    }
                }
            },

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

昌远啊

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue基础学习记录

第一步引包和插值表达式//2021/7/10<div id="app"> <h1 v-text> {{ number }} </h1> <button v-on:click="handclick"> +1 </button> <div class="all" :class="{active:isActive}" > {{text1}} </div> <b
复制链接

扫一扫

专栏目录