学习vue笔记一——初识vue

最新推荐文章于 2023-12-18 14:49:41 发布

yoghurt&girl

最新推荐文章于 2023-12-18 14:49:41 发布

阅读量326

点赞数

分类专栏： vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/ywforever/article/details/127404581

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <!-- 将需要改变的数据不要写死了，需要与vue建立 -->
        <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标签中

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

<!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>Document</title>
    <!-- vue引入 -->
    <!-- 1、cdn  2、下载js包  3、使用npm,用node -->
    <!-- 开发版本 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script> -->
    <!-- 生产版本 ，体积更小可支持2和3，vue检测不到所以建议用开发做调试-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

</head>

<body>
    <!-- v -渲染页面-->
    <div id="root">
        <!-- <div class="root"> -->
        <h1>这是第一块区域</h1>
        <!-- 插值表达式{{}} ,不能写复杂的js代码-->
        <!-- 1、渲染基本数据 -->
        {{msg}}

        <!-- 2、基本运算 -->
        {{1+5}}
        <!-- 3、三元运算 -->
        {{flag ?'真':'假'}}
    </div>
    <!-- 如果使用class，只有第一个有数据/效果 -->
    <!-- <div id="root">
        <h2>这是第二块区域</h2>
        {{msg}}
        {{1+5}}
        {{flag ?'真':'假'}}
    </div> -->
    <div id="app">
        <h2>这是第二块区域</h2>
        {{msg}}
        {{1+5}}
        {{flag ?'真':'假'}}
    </div>



    <!-- 1-vue2 -->
    <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>

    <!-- <script>
        // console.log(123);
        function ha() {
            console.log(555);
        }
    </script>-->

</body>

</html>

下面这个是完整的一个vue3

<!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>Document</title>
    <!-- vue3版本 -->
    <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（常用）等等

<!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">
    <title>Document</title>
    <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>
        <!-- v-bind:
        对象语法
        -->
        <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>

        <!-- 会不会与普通class有覆盖问题 ,不存在覆盖问题。会叠加-->
        <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指令

<!-- 1、将数据显示在页面中，如果没有这个数据会报错 -->
		<h1 v-text='msg'></h1>
		<!-- 2、逻辑运算 -->
		<h1 v-text="msg+haha"></h1>
		<!-- 3、三目运算 -->
		<h1 v-text="1>2?'大于':'小于'"></h1>
		<!-- 4、变量拼接 -->
		<h1 v-text="msg+msg"></h1>
<!-- v-text会覆盖掉里面的内容 -->
		<h1 v-text="msg">{{hei}}</h1>
		<!-- 二、v-html -->
		<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节点

<!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">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- <div v-show="true">{{msg}}</div>
        <div v-show="false">{{msg}}</div>
        <div v-if="false">{{msg}}</div>
        <div v-if="true">{{msg}}</div> -->

        <button @click="change()">点击切换</button>
        <br>
        <img src="img/biaoqing1.png" v-if="imgChange">
        <img src="img/biaoqing2.png" v-if="!imgChange">

        <!-- 需要放在div里才有效果 -->
        <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 没有区别

<ul>
遍历数组
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)”效果一致，但后者可以传参;

 <!-- v-on:方法名【绑定事件】绑定点击事件简写=@click -->
        <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传参测试：

<!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">
    <title>Document</title>
    <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)">加括号不传：undefined</button>

        <!-- 事件修饰符
        .stop:阻止事件冒泡
        .prevent:组织默认事件
        .capture:添加事件捕获，哪一个元素添加了他，就会先执行，剩余的照常执行

        -->
        <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>