Vue基础知识点加案例

最新推荐文章于 2023-08-09 16:45:16 发布
最新推荐文章于 2023-08-09 16:45:16 发布
阅读量664 收藏 5
点赞数 3
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuaigelingzi/article/details/108658162
版权

Vue入门笔记

基础篇

Vue基础知识点

el:挂载点
  • el是用来设置Vue实例挂载管理的元素
  • Vue会管理el选项命中元素及其内部的后代元素
  • 可以使用其他的，但是建议使用ID选择器
  • 可以设置其他的双标签但是不能使用HTML和BODY
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el挂载点</title>
</head>
<body>

    {{message}} //这里的message是挂载不上去的
    在el命中的元素内部，数据都可以挂载上去
    <div id="app" class="app">
        {{message}}
        <span>
            {{message}}
        </span>
    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            // el:'div',
            el:'#app',   //标准挂载在id上，其他也可以但是千万不要是 <html> or <body>
            data:{
                message:"我是程序员"
            }

        })
    </script>
data:数据对象
  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时，遵守js语法即可
<div id="app">
        {{message}}
        <h2>
            {{school.name}}
        </h2>
        <li>{{campus[0]}}</li>
        <li>{{campus[1]}}</li>
        <li>{{campus[2]}}</li>
    </div>


    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            // el:'div',
            el:'#app',   //标准挂载在id上，其他也可以但是千万不要是 <html> or <body>
            data:{
                message:"你好",
                school:{
                    name: "PKU",
                    mobile:'888888'
                },
                campus:["shanghai","beijing","shenzhen"]
            }

        })
    </script>

本地应用

(来！上案例)

  1. 内容绑定，事件绑定(v-text ,v-html,v-on)
  2. 显示切换，属性绑定 (v-show, v-if, v-bind)
  3. 列表循环，表单元素绑定 (v-for, v-on补充, v-model)
v-text: 设置标签的文本值(textContent)
<div id="app">
        <h2 v-text="message"></h2>  
        <!-- //此时会将标签内的内容全部都替换，所以还是推荐用插值表达式 -->
        <h2>早上{{message+"!"}}</h2>
        //早上你好!
    </div>
v-html:设置标签的innerHTML
    <div id="app">
        <p v-html="content"></p>
        helloWorld  //可以发现已经被渲染了
        <p v-text="content"></p>
		//还是data中的内容

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                content: "<a href='http://www.baidu.com'>helloWorld</a>"
            }
        })
    </script>
v-on:为元素绑定事件
    <div id="app">
        <input type="button" value="点击" v-on:click="doIt">
        <input type="button" value="触发" v-on:mouseenter="doIt">
        <input type="button" value="双击666" v-on:dblclick="doIt">
        <input type="button" value="继续点" @click="changeFood">
        <!-- @ === v-on: -->

        <h2 @click="changeFood">{{food}}</h2>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                food:"番茄炒蛋"
            },
            methods:{
                doIt:()=>{
                    alert("helloworld");
                },
                //修改data内的元素用this直接修改
                changeFood:function(){
                    this.food += "好吃！"
                }
            }
        })
    </script>
计数器–案例
   <div id="app">
        <button @click="sub">-</button>
        {{num}}
        <button @click="add">+</button>
    </div>

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

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods:{
                add:function(){
                    if(this.num<10){
                        this.num+=1;
                    }else{!
                        alert("u excess the limit")
                    }
                },
                sub:function(){
                    if(this.num>0){
                        this.num -=1;
                    }else{!
                        alert("u less the limit")
                    }
                }
            }
        })
    </script>
v-show:根据表达式的真假，切换元素的显示和隐藏
  • v-show 指令的作用是：根据真假切换元素的显示状态
  • 原理是修改元素display，实现显示隐藏
  • 指令后面的内容，最终都会解析为布尔值
  • 值为true元素显示，值为false元素隐藏
    <div id="app">
        <button @click="changeShow">changeShow</button>
        <button @click="addAge"> 年龄：{{age}} +</button>
        <img src="./images.jpeg" alt="" v-show="isShow"  @click="changeShow">
        <img src="./images.jpeg" alt="" v-show="age<18"  @click="changeShow">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow: true,
                age: 10
            },
            methods:{
                changeShow:function(){
                    this.isShow = !this.isShow;
                },
                addAge:function(){
                    this.age += 1;
                }
            }
        })
    </script>
v-if:根据表达值的真假，切换元素的显示和隐藏(操纵dom元素)
  • v-if 指令的作用是：根据表达式的真假切换元素的显示状态
  • 本质是通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
    <div id="app">
        <button @click="changeStatus">changeStatus</button>
        <p v-if="isShow">去拿快递</p>
        <p v-show="isShow">去拿快递</p>
        <h2 v-if="temperature>=35">好热</h2>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                isShow: false,
                temperature:40
            },
            methods:{
                changeStatus:function(){
                    this.isShow = !this.isShow;
                }
            }

        })
    </script>
v-bind:设置元素的属性(比如:src,title,class)
  • v-bind:属性名=表达式
  • v-bind 指令的作用是：为元素绑定属性
  • 完整写法是 v-bind:属性名
  • 简写的话可以直接省略v-bind 只保留 :属性名
  • class 属性建议使用对象
    <div id="app">
        <img v-bind:src="imgSrc" alt="" >
        <br>
        <!-- 三元表达式 -->
        <img :src="imgSrc" alt=""  :title="imgTitle+'!!!'" :class="isActive?'active':''"
        @click="toggleActive">
        <!-- 对象 -->
        <img :src="imgSrc" alt=""  :title="imgTitle+'!!!'" :class="{active:isActive}"
        @click="toggleActive">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:"./images.jpeg",
                imgTitle:"我是电吹风",
                isActive: false
            },
            methods:{
                toggleActive:function(){
                    console.log(this.isActive);
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
实例-图片切换
  • 列表数据使用数组保存
  • v-bind指令可以设置元素属性，比如src
  • v-show 和 v-if 都可以切换元素显示状态，频繁切换用 v-show
<div id="app">
        <!-- <img src="./image/car1.jpeg" alt=""> -->
        
        <button @click="pre" v-show="index!=0">pre</button>

        <img :src="images[index]" alt="">

        <button @click="next"v-show="index<images.length-1" >next</button>

    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                 images:["image/car1.jpeg","image/car2.jpeg","image/car3.jpeg"],
                 index:0
            },
            methods:{
                pre:function(){
                    this.index --;
                },

                next:function(){
                    console.log(this.index);
                    this.index ++;
                },

            }
        })
    </script>
v-for
  • v-for 指令的作用是：根据数据生成列表结构
  • 数组经常和v-for结合使用
  • 语法是（item，index）in 数据
  • item 和 index 可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的
    <div id="app">
        <button @click="add">add</button>
        <button @click="move">move</button>
        <ul>
            <li v-for="(item,index) in arr">
               {{index}} {{item}}
            </li>
        </ul>

        <h2 v-for="item in vegetables" v-bind:title="item.name">{{item.name}}</h2>

    </div>

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

    <script>
        var app = new Vue({
            el: "#app",
            data:{
                arr:["peking","shanghai","shenzhen","gunagzhou","hangzhou"],
                vegetables:[
                    {name: "番茄炒蛋"},
                    {name: "凉拌秋葵"},
                    {name: "拌干丝"},
                    {name: "炒青菜"},
                    {name: "胡萝卜炒白萝卜"},
                    {name: "马铃薯炒土豆"}
                ]
            },
            methods:{
                add:function(){
                    this.vegetables.push({name:"青椒炒土豆丝"});
                },
                move:function(){
                    this.vegetables.shift();
                }
            }
        })
    </script>
v-on（补充）:传递自定义参数，事件修饰符

可参考:v-on事件修饰符

  • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 事件后面跟上，.修饰符 可以对事件进行限制
  • .enter 可以限制触发按键为回车
  • 事件修饰符有多种
    <div id="app">
        <input type="button" value="click" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            methods:{
                doIt:function(p1,p2){
                    console.log("do it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function(){
                    console.log("吃了没");
                }
            }
        })
    </script>
v-model: 获取和设置表单元素的值（双向数据绑定）
  • v-model 指令的作用是便捷的设置和获取表单元素的值

表单元素有：文本区域（TEXTAREA），列表框bai（SELECT），文本输入框（duINPUT type=text），密码输zhi入框（INPUT type=password），单选输入框（INPUT type=radio），复选输入框（INPUT type=checkbox），重置按钮、提交按钮、隐藏域、等等

  • 绑定的数据会和表单元素 值 关联
  • 绑定数据 <----> 表单元素的值
    <div id="app">
        <input type="text" v-model="message" @keyup.enter="getMessage">
        <h2>
            {{message}}
        </h2>
        <input type="button" value="set" @click="setMessage">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"here !!"
            },
            methods:{
                getMessage:function(){
                    alert(this.message);
                },
                setMessage:function(){
                    this.message = "我在这";
                }
            }
        })
    </script>
记事本-案例

功能实现：

  • 新增

     生成数据结构：v-for + array
 获取用户输入：v-model
 回车新增数据：v-on.enter

  • 删除

     点击删除指定内容：v-on splice 索引

  • 统计

     统计信息个数：v-text length

  • 清空

    点击清楚所有信息：v-on

  • 隐藏

    没有数据时隐藏元素：v-show，v-if

总结：

 	列表结构可以通过v-for 指令结合数据生成
 	v-on 结合事件修饰符可以对事件进行限制比如.enter
 	v-on在绑定事件时可以传递自定义参数
 	通过v-model可以快速设置和获取表单元素的值
 	基于数据开发的方式

代码没有css，只完成了功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<body>
    <section id="todoapp">
        <header class="header">
            <h1>记事本</h1>
            <input v-model="inputValue" autofocus="autofocus" autocomplete="off" placeholder="请输入内容"
            class="new-todo" @keyup.enter="add">
        </header>

        <section class="main">
            <ul>
                <li class="todo" v-for="(item,index) in list">{{index+1}}  {{item}}
                    <button class="destory" @click="remove(index)">x</button>
                </li>
            </ul>
        </section>

        <footer class="footer" >
            <span class="todo-count" v-if="list.length!=0">
                <!-- 插值和v-text都可以绑定数据 -->
                <strong>{{list.length}}</strong>
                item left
            </span>
            <span @click="clearAll" v-show="list.length!=0"><p>clear all</p></span>
        </footer>

    </section>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#todoapp",
            data:{
                list:["吃饭","睡觉","上厕所"],
                inputValue:"好好学习",
            },
            methods:{
                getMessage:function(){
                    alert(this.message);
                },
                add:function(){
                    this.list.push(this.inputValue);
                },
                remove:function(index){
                    console.log(index);
                    this.list.splice(index,1);
                },
                clearAll:function(){
                    this.list= [];
                }
            }
        })
    </script>
    
</body>
</html>

网络应用

Vue结合网络数据开发应用

axios：网络请求库
axios+vue： 结合vue一起
天气预报案例
axios 实例回忆
    　<input type="button" value="get请求" class="get">
      <input type="button" value="post请求" class="post">
    <!-- 导入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        document.querySelector(".get").onclick = function(){
            axios.get("https://autumnfish.cn/api/joke/list?num=3")
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })
        }

        document.querySelector(".post").onclick = function(){
            axios.post("https://autumnfish.cn/api/user/reg",{username:'mmmmsss'})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })

        }
    </script>
axios+Vue: axios如何结合vue开发网络应用
  • axios 回调函数中的this已经改变，无法访问到data中的数据
  • 把this保存起来，回调函数中直接使用保存的this就可以了
  • 和本地最大的区别就是改变了数据来源
    <div id="app">
        <input type="button" value="getJoke" @click="getJoke">
        <p>{{joke}}</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        /*
            GET API:
            https://autumnfish.cn/api/joke

            POST API:
            https://autumnfish.cn/api/user/reg
        
        */

        var app = new Vue({
            el:"#app",
            data:{
                joke:"很好笑的笑话"
            },
            methods:{
                getJoke:function(){
                    console.log(this.joke);
                    //注意回调函数是匿名函数， 默认this指向window，所以要存起来一个this
                    var _this= this;
                    axios.get("https://autumnfish.cn/api/joke")
                    .then(function(response){
                        console.log(this.joke);
                        _this.joke = response.data;
                    },function(err){
                        console.log(err);
                    })
                }
            }
        })

    </script>
天气预报案例

  • 回车查询

     1.按下回车：v-on .enter
 2.查询数据:  axios接口 v-model
 3.渲染数据： v-for 数组 that

  • 点击查询

    1.点击城市
2.查询数据
3.渲染数据

    <div id="app">
        <div class="searchcontainer">
            <input type="text" @keyup.enter = "searchWeather" class="input_txt" placeholder="请输入查询的天气"
            v-model="city">
            <button class="input_sub">搜索</button>
            <div class="hotkey">
                <a href="javascript:;" @click="changeCity('北京')">北京</a>
                <a href="javascript:;" @click="changeCity('上海')">上海</a>
                <a href="javascript:;" @click="changeCity('广州')">广州</a>
                <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
                <a href="javascript:;" @click="changeCity('武汉')">武汉</a>
            </div>
        </div>


        <ul class="weather_list">
            <li v-for="item in weatherList">{{item.date}} {{item.high}} {{item.low}} {{item.fengxiang}}</li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="./main.js"></script>

main.js

/*
    get api:
    http://wthrcdn.etouch.cn/weather_mini
    请求参数： city
    响应内容： 天气信息
*/

var app = new Vue({
    el:"#app",
    data:{
        city:"",
        weatherList:[],
    },
    methods:{
        searchWeather:function(){
            var _this = this;
            axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
            .then(function(response){
                _this.weatherList = response.data.data.forecast;
            })
            .catch(function(err){
                throw err(err);
            })
        },
        changeCity: function(city){
            this.city = city;
            console.log(this.city);
            this.searchWeather();
        }
    }
})

综合应用

音乐播放器-案例
  • 歌曲搜索 ：
  • 歌曲播放 ：点击播放，歌曲地址获取，歌曲地址设置
  • 歌曲封面
  • 歌曲评论
  • 播放动画
  • mv播放

player.html

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

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <!-- 解决跨域问题 -->
  <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
  <title>悦听player</title>
  <!-- 样式 -->
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="wrap">
    <!-- 播放器主体区域 -->
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png" alt="" />
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic" />
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class='song_wrapper'>
          <ul class="song_list">
            <li v-for="item in musicList">
              <a href="javascript:;" @click="playMusic(item.id)"></a> 
              <b>{{item.name}}</b> 
              <span v-if="item.mvid!=0" @click="playMV(item.mvid)"><i></i></span>
            </li>
          </ul>
          <img src="images/line.png" class="switch_btn" alt="">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlay}">
          <img src="images/player_bar.png" class="play_bar" />
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate" />
          <img :src="musicCover"  class="cover autoRotate" />
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper">
          <h5 class='title'>热门留言</h5>
          <div class='comment_list'>
            <dl v-for="item in hotComments">
              <dt><img :src="item.user.avatarUrl" alt=""></dt>
              <dd class="name">{{item.nickname}}</dd>
              <dd class="detail">
              {{item.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' :src="musicUrl" @play="play" @pause="pause" controls autoplay loop class="myaudio"></audio>
      </div>
      <div class="video_con"  v-show="isShow" style="display: none;">
        <video  :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="close"></div>
      </div>
    </div>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="./main.js"></script>
</body>

</html>

main.js

/**
 * 1.歌曲搜索接口
 * 请求地址:http://autumnfish.cn/search
 * 请求方法：get
 * 请求参数：keyword(查询关键字)
 * 响应内容：歌曲搜素结果
 * 
 * 
 * 2.歌曲url的获取接口
 * 请求地址：https://autumnfish.cn/song/url
 * 请求方法：get
 * 请求参数：id（查询关键字）
 * 响应内容：歌曲url地址
 * 
 * 3.歌曲专辑封面获取
 * 请求地址：https://autumnfish.cn/song/detail
 * 请求方法：get
 * 请求参数：ids（查询关键字）
 * 响应内容：歌曲ids
 * 
 * 
 * 4.热门评论获取
 * 请求地址：https://autumnfish.cn/comment/hot?type=0
 * 请求方法：get
 * 请求参数：id(歌曲id,地址中的type固定为0)
 * 响应内容：歌曲的热门评论
 * 
 * 5.mv地址获取
 * 请求地址：https://autumnfish.cn/mv/url
 * 请求方法：get
 * 请求参数：id（mvid，为0表示没有mv）
 * 响应内容：mv的地址
 * 
 * 
 */

 var app = new Vue({
     el:"#player",
     data:{
         query:"",
         musicList:[],
         musicUrl:"",
         musicCover:"",
         hotComments:[],
         isPlay:false,

         //遮罩层的显示状态，视频播放
         isShow: false,
         //mv address
         mvUrl:""
     },
     methods:{
         searchMusic:function(){
             var _this = this
             axios.get("https://autumnfish.cn/search?keywords="+ this.query)
             .then(function(response){
                // console.log(response);
                _this.musicList = response.data.result.songs;
             },function(err){
                    throw err(err);
             })
         },
         playMusic:function(musicId){
            //  console.log(musicId);
            var _this = this;
            //歌曲地址
            axios.get("https://autumnfish.cn/song/url?id="+musicId)
            .then(function(response){
                // console.log(response.data.data[0].url);
                _this.musicUrl = response.data.data[0].url;
            },function(err){

            })
            //歌曲详情获取
            axios.get("https://autumnfish.cn/song/detail?ids="+musicId)
            .then(function(response){
                // console.log(response.data.songs[0].al.picUrl);
                _this.musicCover = response.data.songs[0].al.picUrl;
            },function(err){})

            //歌曲评论获取
            axios.get("https://autumnfish.cn/comment/hot?type=0&id="+musicId)
            .then(function(response){
                // console.log(response);
                console.log(response.data.hotComments);
                _this.hotComments = response.data.hotComments;
            },function(err){})
         },

         play:function(){
             console.log("play");
             this.isPlay=true;
         },

         pause:function(){
            console.log("pause");
            this.isPlay=false;
         },
         //播放mv
         playMV:function(mvid){
             var _this = this;
             axios.get("https://autumnfish.cn/mv/url?id="+mvid)
             .then(function(response){
                 _this.isShow=true;
                 _this.mvUrl=response.data.data.url;
             },function(err){})

         },

         close:function(){
             this.isShow=false;
             this.mvUrl = "";

         }


     }

 })
shuaigelingzi
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue2.0介绍以及网页版vue环境搭建
m0_67391907的博客
03-05 623
vue2.0介绍以及网页版vue环境搭建 一、原生DOM与虚拟DOM 二、Vue.js 是什么 三、安装vue 1、独立版本 2. 使用 CDN 方法 3、NPM 方法 三、网页版vue环境搭建 一、原生DOM与虚拟DOM 首先，我们需要搞清楚两个概念，什么是原生dom，什么是虚拟dom 传统的开发模式 原生JS或JS操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。 在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执.
vue学习笔记（超详细）
jiey0407的博客
03-09 5456
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
vue 3.0学习笔记(从入门到精通)
10-07
vue 3.0自我学习整理的笔记，有很大的参考价值，包括了所有的知识点，vue的开发环境搭建、组件开发、数据状态管理、vue route、组件之前数据传递等有关知识点
vuejs简单入门
weixin_40055163的博客
03-14 3549
1 VueJS 概述与快速入门 1.1 VueJS介绍 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。 官网:https://cn.vuejs.org/ 1.2 MVVM模式 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开MVVM模式
【Vue教程一】Vue介绍、Vue安装、项目目录介绍
qing_小诺的博客
05-10 1645
一、Vue介绍： Vue.js是一套构建用户界面的前端框架，只关注视图层，还便于与第三方库(插件)兼容，能够帮我们减少不必要的dom操作；提高渲染效率；双向数据绑定。 二、Vue安装： 方式1：下载js到本地，直接用<script>引入，Vue 会被注册为一个全局变量。 在官网（https://cn.vuejs.org/v2/guide/installation.html......
Vue基础知识点
qq_45841534的博客
06-14 139
vue学习笔记
Vue基础知识概括
weixin_41005188的博客
07-18 325
。。
Vue 常考基础知识点 以及常见案例
09-01
Vue 基础知识点和常见案例 在学习 Vue 的基础知识点时，我们需要了解生命周期钩子函数的执行顺序和组件通信的方式。以下是 Vue 基础知识点的详细解释： 生命周期钩子函数 在 Vue 中，生命周期钩子函数是指组件从...
vue基础经典案例.zip
10-21
在学习Vue的基础时，首先会接触到以下几个关键知识点： 1. **安装与环境配置**：Vue可以通过CDN链接直接引入，也可以使用npm进行全局或局部安装。理解如何配置开发环境，包括设置Vue CLI（命令行工具）和创建新项目...
Vue基础培训案例笔记素材等全套课程课件资料.zip
05-04
在"01 vue基础"部分，你将学习到以下关键知识点： 1. **安装Vue**: 通过npm (Node Package Manager) 或者 CDN 链接来引入Vue.js到你的项目中。这一步是所有Vue项目的起点。 2. **Vue实例**: 创建Vue实例是使用Vue...
vue.js基础综合案例.zip
11-09
总的来说，这个压缩包提供了一系列Vue.js的基础案例，涵盖了Vue的实例、数据绑定、指令、组件、路由和状态管理等核心知识点。通过实践这些案例，你可以更好地理解和掌握Vue.js，为构建实际项目打下坚实的基础。
vue知识点.pdf
01-16
案例中，你可能会看到如何使用Vue来创建一个简单的应用程序，包含组件的创建、数据绑定、条件渲染、循环遍历以及事件处理等内容。通过实践，你可以深入理解Vue的这些基本概念和工作原理，进一步提升你的前端开发技能...
html中引入vue在线地址并使用
Shivy_的博客
01-12 7182
介绍 使用vue语法，不一定非要搭建vue的项目才可以使用；在HTML当中，也可以直接使用vue的语法，只需要引入vue的在线地址就可以了，具体操作如下： vue.js的在线引用地址(vue 官方引入地址)： <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 在html中使用vue语法 <!DOCTYPE html> <html lang="en"> <hea
Vue——B站黑马程序员教程
http____的博客
12-04 3299
Vue.js学习笔记基础安装介绍Vue实例模板语法计算属性和侦听器class 与 style 绑定条件渲染列表渲染事件处理表单输入绑定组件基础深入了解组件过渡 & 动画可复用性 & 组合工具模块化内在 基础 安装 直接用 介绍 Vue实例 模板语法 计算属性和侦听器 class 与 style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 组件基础 深入了解组件 过渡 & 动画 可复用性 & 组合 工具 模块化 内在 ...
Vue.js从入门到精通（全），爆肝十一万字，“建议收藏”，国庆福利！！！
陈新科的博客
09-29 4052
内容很饱满，过程可能会枯燥，愿你经过风雨，过后能成为不一样的烟火????，为了奖励看到最后的小伙伴，博主为你们准备了礼物哦 目录 开始使用Vue el $mount data 插值表达式 vue的响应式-1 vm.$el vm.$nextTick & Vue.nextTick vue的响应式-2 扩展_剖析Vue响应式原理 Vue相关指令 v-pre v-cloak v-once v-text v-html 条件渲染 v-if v-else v-else-i
vue.js cdn 引入（cdn地址总结）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
06-16 4万+
对于制作原型或学习，你可以这样使用最新版本： 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏： 如果你使用原生 ES Modules，这里也有一个兼容 ES Module 的构建文件： 你可以在 cdn.jsdelivr.net/npm/vue 浏览 NPM 包的源代码。Vue 也可以在 unpkg 和 cdnjs 上获取 (cdnjs 的版本更新可能略滞后)。请确认了解不同构建版本并在你发布的站点中使用生产环境版本，把 换成 。这是一个更小的构建，可
Vue在线引入地址
WCR_520的博客
09-20 3612
【代码】Vue在线引入地址。
Vue基础-黑马笔记
weixin_44362304的博客
08-09 372
vue基础
0729信息技术服务知识12.pdf
最新发布
07-30
0729信息技术服务知识12.pdf
Vue基础与面试高频知识点详解
在Vue的面试中，面试官可能会关注以下几个关键知识点： 1. **轻量级特性**： Vue的核心库体积小巧，不依赖其他大库，这使得它在性能和初始加载速度上具有优势。对于需要快速响应和动态更新的界面，Vue的数据绑定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值