Vue笔记整理从0开始-Day1

最新推荐文章于 2024-10-16 18:35:07 发布

honeyNi

最新推荐文章于 2024-10-16 18:35:07 发布

阅读量176

点赞数

分类专栏：前端-Vue 文章标签： vue vue.js

本文链接：https://blog.csdn.net/invincibleFF/article/details/105801813

版权

前端-Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.基本指令使用

v-cloak:数据加载完毕后再显示内容
v-text:文本数据加载
v-html:解析html语句
v-bind:用于绑定属性的指令
v-on:事件绑定机制
v-model:双向绑定

v-cloak:作用:等到数据被渲染出来之后再显示，防止出现mustache的{{msg}}语法，直接上Demo

<!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/dist/vue.js"></script>			//这里直接引用vue即可，由于是学习，就采用最简单的方式来构建环境
</head>
<style>					//这里需要定义一下 css样式，没加载出来之前使用None不显示
    [v-cloak]{
        display:none
    }
</style>
<body>
    <div id="app">
      <p v-cloak>  {{message}}</p> 				//v-cloak的使用，确保数据渲染之后才正常显示
    </div>

    <script type="text/javascript">
       var app =  new Vue({
            el:"#app",
            data:{
                message:'Hello world!'
            }

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

v-text:作用:渲染普通标签:和mustache语法效果一样:Demo:

  <div id="app">
      <p v-cloak>{{message}}</p>
      <p v-text="message"> </p> 
    </div>

区别:
1.v-text没有闪烁问题
2.mustache语法可以用来做字符串的拼接，但是v-text不行,++{{msg}}++，因此常用mustache语法，具体视情况而定

v-html:作用:用来渲染html语句，防止解析成默认的字符串，Demo:

<body>
    <div id="app">
      <p v-cloak>{{message}}</p>
      <p v-text="message"> </p> 
      <p v-html="message2"></p>
    </div>

    <script type="text/javascript">
       var app =  new Vue({
            el:"#app",
            data:{
                message:'Hello world!',
                message2: '<h1>我是一个h1标签</h1>'
            }

       })

v-bind:作用:用于绑定属性的指令，一般用于url地址，css加载,input表单title的绑定，数据的单项绑定，从m自动绑定到v中，data->界面,无法双向绑定，Demo:

<body>
    <div id="app">
      <p v-cloak>{{message}}</p>
      <p v-text="message"> </p> 
      <p v-html="message2"></p>
      <input v-bind:title="myTitle" type="button" value="按钮">  //绑定data中的myTitle,告诉vue这是一个变量而不是字符串，需要去vue的data中寻找
    </div>

    <script type="text/javascript">
       var app =  new Vue({
            el:"#app",
            data:{
                message:'Hello world!',
                message2: '<h1>我是一个h1标签</h1>',
                myTitle:"自定义标题"
            }
       })
    </script>
</body>

v-on:用来绑定事件操作机制，例如点击，失去焦点，mouseover等，Demo:点击按钮后可以弹出:test v-on内容

<body>
    <div id="app">
      <input v-bind:title="myTitle" type="button" value="按钮" @click="show">     //v-bind简写为@
    </div>

    <script type="text/javascript">
       var app =  new Vue({
            el:"#app",
            data:{
            },
            methods:{
                show:function(){
                    alert("test v-on")
                }
            }

       })
    </script>
</body>

二.跑马灯简单案例

这里实现了一个跑马灯的简单效果，直接上Code:

<!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/dist/vue.js"></script>
</head>
<style>
    [v-cloak] {
        display: none
    }
</style>

<body>
    <div id="app">
        <input type="button" value="浪起来" @click="go">
        <input type="button" value="低调" @click="stop">
        <br>
        {{msg}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                msg: '别浪 - -!猥琐发育',
                intervalId:null
            },
            methods: {
                go() {
                    if(this.intervalId!=null) return;
                    this.intervalId = setInterval(() => {
                        var start = this.msg.substring(0, 1)
                        var end = this.msg.substring(1)
                        this.msg = end + start
                    }, 500);
                },
                stop() {
                    clearInterval(this.intervalId);
                    this.intervalId=null
                }
            }

        })
    </script>
</body>

</html>

这里说一下基本案例的知识点以及注意事项:

对字符串的操作，这里用到了this.msg.substring(0, 1)字符串分别截取第一个及之后的字符串内容，然后用来做拼接
定时器的基本用法，返回的定时器id，以及定时器的停止使用，还有this作用域的用法，这里在ES6之后我们用箭头函数，那么定时器里的this将会和父作用域的this保持一致，也就是new出来的vue实例，否则还需要指定this的指代对象。

三.事件修饰符

.stop:阻止冒泡:小的btn在div内部，那么会冒泡触发事件:默认
.prevent:阻止默认事件
.capture:添加事件侦听器时使用事件捕获模式
.self:只当事件在该元素本身触发时触发回调
.once:事件只触发一次

详细Demo讲解:

<!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/dist/vue.js"></script>
</head>
<style>
    [v-cloak] {
        display: none
    }

    .innerclass {
        height: 400px;
        background-color: red;
    }
</style>

<body>
    <div id="app">
        <div class="innerclass" @click="innerClick">		//关键点，外层的事件
            <button @click="btnClick">								//内层的事件
                点击我
            </button>
        </div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                btnClick() {
                    console.log("btn Click")
                },
                innerClick() {
                    console.log("inner Click")
                },
            }
        })
    </script>
</body>

</html>

这里我们点击了里面的btn,那么控制台会输出btn Click和inner Click

使用.stop后只会输出当前btn的内容，外层多少个事件都不会弹出:
<button @click.stop=“btnClick”>
使用prevent后阻止页面的跳转，用在a标签上，感觉用的不太多
<a href=“http://www.baidu.com” @click.prevent=“baidu()”>百度一下
使用.capture后将会从外往内层做内容打印，反向冒泡，该修饰符要作用在外层的事件修饰符

 <div id="app">
        <div class="innerclass" @click.capture="innerClick">
            <button @click="btnClick">
                点击我
            </button>
            <a href="http://www.baidu.com" @click.prevent="baidu()">百度一下</a>
        </div>
    </div>

self使用后只能在当前的div那层弹出，但是更外层的事件不会被阻止,在多层的时候效果极为明显
<div class=“innerclass” @click.self=“innerClick”>
once只会执行一次事件的修饰符:
<a href=“http://www.baidu.com” @click.prevent.once=“baidu()”>百度一下
这里第一次会被prevent掉，但是第二次就会进入到百度的页面了

v-model:事件的双向绑定,Demo:

    <div id="app">
        <input value="浪起来" v-model="msg">
        {{msg}}
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                msg: 'v-model测试',
              
            },
        
        })
    </script>

vue中使用样式:常用的css样式有以下几种形式:

   <h1 :class="['red','thin']">这是一个h1标签</h1>      	//数组样式
   <h1 :class="['red','thin',isactive?'active':'']">这是一个h1标签</h1>	 //三元运算符
   <h1 :class="['red','thin',{'active':isactive}]">这是一个h1标签</h1>	//对象形式
   <h1 :class="{red:true,thin:true}">这是一个h1标签</h1>					//对象形式

v-for:用来循环遍历:常用形式:

遍历数组
遍历对象数组(常用)
遍历对象
遍历数字
注意:遍历对象的过程中需要使用:key，尤其是组件的使用中必须要添加key,否则会报错，因为vue中只负责渲染，不会记录具体的位置，因此要添加来对应具体的内容。同时遍历过程中还有索引，内容，key,value等内容可以使用。Demo:

 <div id="app">
        <div v-for="(item,i) in listArr" :key="item.id">id:++{{item.id}}++name:++{{item.name}}++index:++{{i}}</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                msg: 'v-model测试',
                listArr:[
                    {id:1,name:"wzy"},
                    {id:2,name:"ff"},
                    {id:3,name:"ffy"},
                ]
            },
        })
    </script>

v-if和v-show:区别: