学习vue笔记一——初识vue


<body>
    
    <div id="root">
        
        <h1>hello,{{name}} h1>
    div>
 
 
    <script type="text/javascript">
        Vue.config.productionTip = false//阻止 vue 在启动时生成生产提示
        //创建vue实例
        // const x =-->
        new Vue({
            el: '#root',//用于之地你那个当前vue实例为哪个容器服务，值通常为css选择器字符串
            data: {
                //data中用于存数据，数据供el所指定的容器去使用。值我们暂时先写成一个对象
                name: '尚硅谷123'
            }
        })
 
 
    script>

在开始之前我们要知道目前vue是分了vue2 和vue3的，具体的内容可以去官网看看：

vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

引入vue：

cdn

下载压缩包

使用npm

引入vue是要放在head标签中

下面是我的测试，仅供参考！！！


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>Documenttitle>
    
    
    
    
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10">script>
 
head>
 
<body>
    
    <div id="root">
        
        <h1>这是第一块区域h1>
        
        
        {{msg}}
 
        
        {{1+5}}
        
        {{flag ?'真':'假'}}
    div>
    
    
    <div id="app">
        <h2>这是第二块区域h2>
        {{msg}}
        {{1+5}}
        {{flag ?'真':'假'}}
    div>
 
 
 
    
    <script>
        //创建一个vue的实例
        var vm = new Vue({//vm-控制层
            el: '#root',
            // el: '.root',
            data: {
                //m-数据源
                msg: '哈哈哈哈，老团',
                flag: false,
                hah: 'heihei',
            }
 
        })
        //一个页面一个实例，el建议使用id不建议使用class，
        // var vm1 = new Vue({
        //     el: '#app',
 
        //     data: {
        //         msg: '哈哈哈哈，老团',
        //         flag: false
        //     }
 
        // })
 
 
 
 
    script>
 
    
 
body>
 
html>

下面这个是完整的一个vue3


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>Documenttitle>
    
    <script src="https://unpkg.com/vue@3/dist/vue.global.js">script>
 
head>
 
<body>
    <div id="root">
        {{msg}}
    div>
    <script>
        //vue3实例用crateApp
        const app = Vue.createApp({
            //data:{}-vue2这是写成一个对象，而vue3写成一个方法
            data() {
                return {
                    msg: 'hello world！'
                }
            }
        })
        // //通过.mount挂载到对应的根节点上
        const vm = app.mount('#root')
        console.log(vm);
 
        /*
        vue3:proxy对象代理-es6新增
        vue2:object.defineProperty
        */
        //    vue3最新方式-解构赋值
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    msg: 'hello world！'
                }
            }
        }).mount('#root')
    script>
 
body>
 
html>

一、内置指令

1、v-model、v-bind指令

v-model：双向数据绑定不能简写

v-bind：单向数据绑定可以直接简写成：

v-model的测试：


<body>
    <div id="root">
        <input type="text" v-model="value" />
        {{value}}
        <p @click="charge()">{{ww}}p>
        <h1>{{diandan}}h1>
        <input type="checkbox" value="薯条" v-model="diandan" />薯条
        <input type="checkbox" value="烤鱼" v-model="diandan" />烤鱼
        <input type="checkbox" value="炸鸡" v-model="diandan" />炸鸡
        <input type="checkbox" value="可乐" v-model="diandan" />可乐
        <input type="checkbox" value="汉堡" v-model="diandan" />汉堡
    div>
    <script>
 
        const vm = new Vue({
            el: '#root',
 
            data() {
                return {
                    value: "",
                    ww: 'heihei',
                    diandan: [],
                   
                }
            },
            methods: {
                charge() {
                    this.ww = '哈哈'
                }
            }
        });
    script>

效果图：

v-bind测试：可以绑定style、src、class（常用）等等


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">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
    <style>
        .haclass {
            font-size: 30px;
            background-color: beige;
        }
 
        .heiclass {
            font-size: 50px;
            background-color: rgb(237, 237, 48);
        }
 
        .fz {
            font-size: 80px;
        }
 
        .bg {
            background-color: red;
        }
 
        .col {
            color: white;
        }
 
        .bb {
            border: 2px solid blue;
        }
    style>
head>
 
<body>
    <div id="root">
        <div>{{msg}}div>
        
        <div :class="ha">{{msg}}div>
 
        <button @click="change()">发生改变button>
        
        <div :class="classObj">动态绑定数据div>
        <div v-bind:class="classObj">动态绑定数据div>
        <br>
        
        <div :class="[fz,bg]">哈哈哈，现在气氛真尴尬！！！div>
        
        <div :class="[{'fz':isF,'bg':isC},col]">哈哈来看看数组对象div>
 
        
        <div :class="ha" class="bb">覆盖问题div>
        
        <div :class="num===1?fz:bg">看是哪个属性div>
    div>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    msg: '有人感兴趣',
                    ha: 'haclass',
                    classObj: {
                        //如果在此处赋值，后面可以跟字符串/布尔值的true，false
                        fz: true,
                        bg: true,
                    },
                    fz: 'fz',
                    bg: 'bg',
                    isF: true,
                    isC: true,
                    col: 'col',
                    num: 1,
                }
            },
            methods: {
                change() {
                    this.ha = 'heiclass'
 
                    //如果去改变的话，只能使用布尔值
                    this.classObj.bg = false
                }
            }
        });
    script>
body>
 
html>

效果图：

2、v-text、v-html、v-cloak指令


		<h1 v-text='msg'>h1>
		
		<h1 v-text="msg+haha">h1>
		
		<h1 v-text="1>2?'大于':'小于'">h1>
		
		<h1 v-text="msg+msg">h1>
		<h1 v-text="msg">{{hei}}h1>
		
		<p v-html="hei">p>
		<p v-text="hei">p>
		<p v-html="hei+'111'">p>
v-cloak指令（没有值）:
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}的问题。
 
<div v-cloak>{{msg}}div>
const vm = new Vue({
			el: '#root',
			data() {
				return {
					msg: '哈哈哈',
					// hei:'呵呵呵'
					hei: '<h1>文件间h1>'
				}
			},
			methods: {
			},
		})
{{}}如果加载比较慢，页面会直接出现{{msg}},为防止出现这种情况，可以使用v-cloak

3、 v-if、v-show指令

v-show和v-if

共同点：控制元素显示和隐藏

不同点：v-show是控制元素的display，v-if创建和删除dom节点


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">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
head>
 
<body>
    <div id="root">
        
 
        <button @click="change()">点击切换button>
        <br>
        <img src="img/biaoqing1.png" v-if="imgChange">
        <img src="img/biaoqing2.png" v-if="!imgChange">
 
        
        <h1 v-if="age<18">未成年h1>
        <h1 v-else-if="age>=18 && age<40">青年h1>
        <h1 v-else-if="age>40 && age<100">中年团子h1>
        <h1 v-else>老年h1>
    div>
 
    <script>
        /*
        v-show和v-if
        共同点：控制元素显示和隐藏
        不同点：v-show是控制元素的display，v-if创建和删除dom节点
        */
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    msg: '我出现了',
                    imgChange: true,
                    age: '20'
                }
            },
            methods: {
                change() {
                    this.imgChange = !this.imgChange
                }
            }
        });
    script>
body>
 
html>

效果图：

4、v-for、key指令

等同于for循环
for in of
js for in 遍历对象
js for of 遍历数组
vue in of 没有区别

遍历数组
item：数组中的每一项【可命名
index:下标=值
arr:原数组
in：遍历


       <ul>
          
            <li v-for="item in arr">{{item}}li>
            <li v-for="item of arr">{{item}}li>
            <li v-for="(item,idx) of arr" :key="idx">{{item}}——{{idx}}li>
            
            <li v-for="(item,idx) of user" :key="idx">{{item}}——{{idx}}li>
        ul>
const vm = new Vue({
            el: '#root',
            data() {
                return {
                    arr: ['团子', '帅哥', '美女'],
                    user: {
                        name: '团子',
                        sex: '女',
                        job: '程序员'
                    },
 methods: {
            }
        });

5、v-on和自定义指令

v-on给一个元素绑定一个/多个时间：事件名
事件的基本使用:
1.使用v-on :xxx或xxx绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5.@click="demo”和 @click="demo($event)”效果一致，但后者可以传参;


 
        <button v-on:click="big">变大button>
        <button @click="small">变小button>
  methods: {
                // big: function () { },//不推荐,太繁琐
                // big:()=>{},//箭头函数不可以，this指向的widow
                big() {
                    // this.imgHeight += 100
                    // this.imgWidth += 100
                    if (this.imgWidth >= 800) {
                        alert('到极限了！')
                    } else {
                        this.imgHeight += 100
                        this.imgWidth += 100
                    }
                },
                small() {
                    if (this.imgWidth <= 200) {
                        alert('不能再小了！')
                    }
                    this.imgWidth -= 100
                    this.imgHeight -= 100
                }

v-on传参测试：


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">
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>
head>
 
<body>
    <div id="root">
        
        <button @click="change">不加括号button>
        <button @click="change()">加括号button>
        
        <button @click="ha(123,$event)">传参:参数button>
        <button @click="ha()">不传：event对象button>
        <button @click="ha($event)">加括号不传：undefinedbutton>
 
        
        <div @click="stopWai">
            <div @click.stop="stopLi">
                <div @click.capture="stopLi1">
                    <div @click.stop="stopLi2">哈哈哈div>
                div>
            div>
 
 
 
        div>
        <a href="http://www.baidu.com">去官网a>
        <a href.prevent="http://www.baidu.com">哪里都不去a>
    div>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                }
            },
            methods: {
                change() {
                    console.log(1);
                },
                ha(val, event) {
                    console.log(val, event);
                },
                stopWai() {
                    console.log('我是外部事件');
                },
                stopLi() {
                    console.log('我是里面的事件');
                },
                stopLi1() {
                    console.log('我是2事件');
                },
                stopLi2() {
                    console.log('我是3事件');
                }
            }
        });
    script>
body>
 
html>

相关阅读:
终日乾乾，夕惕若厉
 Linux CPU之mpstat
面试：Android中的HOOK方案
 使用Piwigo管理您的照片
 国产理想二极管控制器SCT53600，可替代TI的LM74700
盲人公园游玩：科技之翼助力视障人士畅享户外乐趣
 Vue项目的记录（七）
经典矩阵试题（一）
送你一份价值10W的非专业的面试技巧
 Postgresql中如何处理逻辑复制冲突
原文地址：https://blog.csdn.net/ywforever/article/details/127404581