Vue基础笔记

413丶路西法

已于 2023-06-15 10:36:18 修改

阅读量2.5k

点赞数

文章标签： vue.js 前端 javascript

于 2022-06-27 19:08:28 首次发布

本文链接：https://blog.csdn.net/qq_53290615/article/details/125447249

版权

el:挂载点

1、建议使用id选择器 --（#app），其他选择器也可以
2、一般使用<div></div>作为挂载的元素（必须是双标签）

<div id="app">
    {{message}}
</div>
<div id="cbb">
    {{message}}
    {{app}}
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"Hello World"
        }
    })
    const cbb = new Vue({
        el:'#cbb',
        data:{
            message: "hello cbb",
            app:"asd"
        }
    })
</script>

在这里插入图片描述

data:数据对象（mustache胡子语法）

1、Vue中用到的数据定义在data中
2、data中可以写复杂类型的数据
3、渲染复杂类型数据时，遵守js的语法即可

<div id="app">
    <div>{{num + 1}} </div>
    <div>{{numStr + 1}}</div>
    <div>{{num * 3}} </div>
    <div>{{numStr * 3}}</div>
    <div>{{firstName}} {{lastName}}</div>
    <div>{{firstName + lastName}}</div>
    <div>{{ flag ? 'YES' : 'NO' }}</div>
    <div>{{ nums.split(',').reverse().join('-') }}</div>
    <!--注意一下：命令式编程区别和声明式编程-->
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            num:1,
            numStr:'1',
            flag:true,
            nums:'1,2,3,4,5,6,7,8,9,0',
            firstName:'Dwyane',
            lastName:'Wade'
        }
    })
</script>

在这里插入图片描述

Vue指令

1、内容绑定，事件绑定（v-text、v-html、v-on）

（1）v-text

1、v-text指令的作用是：设置标签的内容（textContent）
2、默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容
3、内部支持写表达式

<body>
<div id="cbb">
    <h2 v-text="message+'aaa'">深深</h2>
    <h2 v-text="ccc+'aaa'">深深</h2>
    <h2>{{message+'aaa'}}深深</h2>
</div>
</body>
<script>
    const cbb = new Vue({
        el:'#cbb',
        data: {
            message: "哈哈哈！！！",
            ccc: "xixixi!!!"
        }
    })
    //v-text 用来设置当前元素的文本内容，相当于DOM对象的 innerText或textContent
</script>

在这里插入图片描述

（2）v-html

1、v-html 指令的作用：设置元素的innerHTML
2、内容中有html结构会被解析为html标签，内容为text则解析为text

<div id="app">
    <div id="id" style="width: 200px" v-html="htmlStr">
    </div>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            htmlStr:"<span style='color: red'>我是html代码段</span>"
        }
    })
    //v-html 指令的作用：设置元素的innerHTML
</script>

在这里插入图片描述

（3）v-on

1、v-on指令的作用是：为元素绑定事件
2、事件名不需要写on
3、指令可以简写为@
4、绑定的方法定义在methods属性中
5、方法的内部通过this关键字可以访问定义在data中的数据

<div id="app">
    <button v-on:click="click">{{btnName}}</button>
    <!--语法糖 @-->
    <button @click='click'>{{btnName + '（2）'}}</button>
    <button @click='clickEvent'>{{btnName + '（3）'}}</button>

    <button @mouseover="mouseoverHandler('test')">鼠标经过</button>

   <form v-on:submit="submit">
        <input type="text">
        <button type="submit">提交</button>
    </form>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            btnName: '按钮1'
        },
        methods:{
            click:function (){
               alert('按钮1被点击')
            },
            clickEvent(event){
                console.log(event)
            },
            mouseoverHandler:function (val){
                console.log("鼠标经过>>>>>",val)
            },
            submit:function (event){
                //阻止默认事件 相当于时间修饰符.prevent
                event.preventDefault()
            }
        }
    })
</script>

2、显示切换，属性绑定（v-show、v-if、v-bind）

（1）v-show

1、v-show指令的作用是：根据真假切换元素的显示状态
2、原理是修改元素的display，实现显示隐藏
3、指令后面的内容，最终都会解析为布尔值
4、值为true元素显示，值为false元素隐藏
5、数据改变之后，对应元素的显示状态会同步更新

（2）v-if—（v-else、v-else-if）

1、v-if指令的作用是：根据表达式的真假切换元素的显示状态
2、本质是通过操纵dom元素来切换显示状态
3、表达式的值为true，元素存在于dom树中；值为false，从dom树中移除
4、频繁的切换使用v-show，反之使用v-if，前者的切换消耗小
5、v-else和v-else-if就是字面意思

<body>
<div id="app">
    <!--v-if-->
    <div v-if="exist">Kobe</div>
    <div v-else>James</div>

    <div v-show="exist">kobe</div>
    <div v-show="!exist">James</div>


   <!-- 拓展  v-if中的key-->
   <!-- <template v-if="exist">
        <label>用户名：</label>
        <input type="text" placeholder="请输入用户名" key="username" />
    </template>
    <template v-else>
        <label>邮箱：</label>
        <input type="text" placeholder="请输入邮箱" key="mail" />
    </template>
    <button type="button" @click="change">切换</button>-->
     <!--vue在渲染元素时，处于效率考虑会尽量复用已有的元素，而不重新渲染，
    上面的例子虽然dom变化了，但是输入框输入的内容没变，只是替换了placeholder，说明input被复用了-->

</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            exist: true
        },
        methods:{
            change:function (){
                this.exist = !this.exist
            }
        }
    })
</script>

在这里插入图片描述

（3）v-bind —设置元素属性（src、title、class）

1、v-bind指令的作用是：为元素绑定属性
2、完整写法是v-bind:属性名
3、简写可以直接省略v-bind，只保留:属性名
4、需要动态的增删class建议使用对象的方式

<body>
<div id="app">
    <!-- 不能使用mustache语法 把imgURL直接当成字符串 在内容里面才能使用-->
    <!-- <img src="{{imgURL}}" style="width: 600px;height: 300px" alt=""> -->
    <div><img v-bind:src="imgURL" style="width: 600px;height: 300px"></div>
    <div><a v-bind:href="aHref">百度一下</a></div>
    <div><a :href="aHref">百度一下</a></div>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            imgURL:"https://fyb-pc-static.cdn.bcebos.com/static/asset/homepage@2x_7926b0bf1e591ee96d2fc68b3a8a1ee0.png",
            aHref:'https://www.baidu.com'
        }
    })
</script>

在这里插入图片描述

<body>
<div id="app">
    <!--  v-bind直接绑定class-->
    <div :class="classData">{{message}}</div>
    <!--绑定对象-->
    <div :class="{ 'blue-font': hasError }">{{message}}</div>
    <div
            class="static"
            :class="{ 'orange-font': isActive, 'text-danger': hasError }"
    >
        {{message}}
    </div>

    <!--绑定数组-->
    <h2 :class="['active','line']">{{message}}</h2>
    <!-- 没有单引号，是变量 -->
    <h2 class="title" :class="[active,line]">{{message}}</h2>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data: {
            classData:'red-font',
            message:'我是message',
            isActive: false,
            hasError: true,
            active:'blue-font',
            line:'line-class'
        }
    })
</script>
<style>
    .red-font {
        color: red;
    }
    .blue-font {
        color: blue;
    }
    .orange-font{
        color: orange;
    }
</style>

在这里插入图片描述

3、列表循环，表单元素绑定（v-for、v-on、v-model）

（1）v-for —响应式生成列表结构

1、v-for指令的作用是：根据数据生成列表结构
2、数组经常和v-for结合使用
3、语法是（item，index） in 数据
4、item和index可以结合其他指令一起使用
5、数组长度的更新会同步到页面上，是响应式的

<div id="app">
    <!--此时循环的是li，也可以循环外层template，这样就可以在li上加属性-->
    <ul>
        <li v-for="item in items" :key='item'>{{ item }} </li>
    </ul>

    <ul>
        <li v-for="(item,index) in items" :key='item'> {{index}}.{{ item }} </li>
    </ul>

    <ul>
        <li v-for="person in persons" :key='person.name'>姓名：{{ person.name }} ,年龄：{{ person.age}}</li>
    </ul>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            items: ['blue','yellow','red','orange'],
            persons:[
                {name:'张三',age:18},
                {name:'李四',age:60},
                {name:'王五',age:38},
                {name:'赵六',age:28}
            ]
        }
    })
</script>

在这里插入图片描述

（2）v-on

1、事件绑定的方法写成函数调用的形式，可以传入自定义参数
2、定义方法时需要定义形参来接收传入的实参
3、事件的后面跟上.修饰符可以对事件进行限制
4、.enter可以限制触发的按键为回车
5、事件修饰符有很多种

（3）v-model —双向数据绑定

1、v-model指令的作用是便捷的设置和获取表单元素的值
2、绑定的数据会和表单元素值相关联
3、二者是双向数据绑定

<body>
<div id="app">
    <div><input type="text" v-model.lazy="name"></div>
<!--     <input :value="name" @input="name= $event.target.value"> 语法糖-->
    <div>name:{{name}}</div>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            name: 'info'
        }
    })
</script>

在这里插入图片描述

深入了解

组件化

全局组件：在所有的vue实例中都可以使用,注意：先注册组件，再初始化根实例。

Vue.component('my-com',{
      template:'<h2>it is a global components</h2>'
})

局部组件：是在某一个具体的vue实例中定义的，只能在这个vue实例中使用；在Vue实例中使用components对象创建组件，可以创建多个组件；

new Vue({
        components:{
            'my-footer':{
               template:'<h1>it is local components</h1>'
           }
        }
    })
    ```
 ### 计算属性
 ```html
 <body>
<div id="app">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"Hello World"
        },
        computed:{
            // 计算属性的 getter
            reversedMessage: function () {
                // `this` 指向 vm 实例
                return this.message.split('').reverse().join('')
            }
            //注意一下与methods区别
        }
    })
</script>

监听器

</body>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:"Hello World",
            person:{
                id:'1',
                name:'张三',
                age:18
            },
            list:['1','2','3']
        },
        watch: {
            // 监听
            message: function (newValue,oldValue) {
                console.log('newValue',newValue)
                console.log('oldValue',oldValue)
            },
            /*person:{
                handler (newMsg,oldMsg){
                    console.log(oldMsg)
                    console.log(newMsg)
                },
                immediate:true,
                deep:true
            }*/
        },
        methods:{
            change(){
                this.message = '改变之后'
            }
        }
    })
</script>

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

<body>
<div id="app">
    <div>{{ messageLower | capitalize}}</div>
    <div>{{ empId | format(empName)}}</div>
    <div><span :class="messageLower | capitalize">1</span></div>
</div>
</body>
<script>
    // 全局filter
   /* Vue.filter('capitalize', function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toLowerCase() + value.slice(1)
    })*/
    const app = new Vue({
        el:'#app',
        data:{
            messageLower:"hello World",
            messageUpper:"Hello World",
            empId:'0001',
            empName:'张三'
        },
        filters: {
            //字符串首字母大写
            capitalize: function (value) {
                if (!value) return ''
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.slice(1)
            },
            format: function (id,name) {
                return `（${id}）${name}`
            }
        }
    })
</script>

事件修饰符

// 表单修饰符
.lazy - 我们输入完所有东西，光标离开才更新视图
.trim - 过滤首尾空格
.number - 自动将用户的输入值转为数值类型，如果你先输入数字，那它就会限制你输入的只能是数字。如果你先输入字符串，那它就相当于没有加.number

// 事件修饰符 （尽管我们可以在方法中轻松实现相关处理，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。）
.stop - 调用 event.stopPropagation(), 阻止事件冒泡(不触发父级事件)。
.prevent - 调用 event.preventDefault(), 阻止默认行为，比如点击链接会进行跳转；填写表单时按回车会自动提交到服务器；点击鼠标右键会呼出浏览器右键菜单。
.capture - 添加事件侦听器时使用 capture 模式。事件触发从包含这个元素的顶层开始往下触发，即内部元素触发的事件先在此处理，然后才交由内部元素进行处理。完整的事件机制是：捕获阶段--目标阶段--冒泡阶段
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.native - 监听组件根元素的原生事件。把一个vue组件转化为一个普通的HTML标签。
.once - 只触发一次回调。

// 鼠标按键修饰符
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。

// 键值修饰符
.keyCode - 只当事件是从特定键触发时才触发回调。
.exact - 只需要或者只能按一个系统修饰键来触发。

// 其他修饰符
.sync - 父子组件进行双向数据绑定，会扩展成一个更新父组件绑定值的 v-on 侦听器。
.camel - HTML 特性是不区分大小写的，该修饰符使属性被渲染为驼峰名

var let const区别

# 变量提升
// 不会报错
console.log(a);
var a = 10;  
# 作用域
    for (var i = 0; i < 6; i++) {
            setTimeout(function () {
                console.log(i);
            }, 1000)
    }
//setTimeout是个异步函数，它会在循环结束后再执行，i用var声明，全局作用域，用let声明，在每次循环中，setTimeout里的i都是独立的(局部作用域)
 var btns = document.getElementsByTagName("button")
  for (var i = 0; i < btns.length; i++) {
          btns[i].addEventListener('click',function (){
              console.log("第" + i + "个按钮被点击")
          })
  }