vue基础

小铭同学123

于 2024-07-16 21:10:56 发布

阅读量153

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_65338906/article/details/140475802

版权

1.vue.js概念

构建用户界面的渐进式框架，采用自底向上逐层应用开发，核心理念是数据驱动视图，组件化开发。

2.框架和库的区别

2.1框架

是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。

2.2库

提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

3.插值表达式 {{}}

作用：将数据渲染到页面上，可以做简单的运算

            <!-- 实现将data中的数据，msg渲染到页面当中，进行加法运算后，页面中的数据为6 -->
<body>
    <div id="app">
        <div>
            {{msg+3}}
        </div>
    </div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 3,
        },
        methods: {
        }
    })
</script>

3.vue指令

v-text v-html
作用在页面内插入内容，写在标签里面
相同点：v-text和v-html的都会替换标签中原有的内容
不同点：不同点：v-html会解析富文本，v-text不会

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background-color:bisque;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- v-text -->
        <div class="box1" v-text="msg">
            1111
        </div>
        <!-- v-html -->
        <div  class="box2" v-html="content">
            1111
        </div>
    </div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 3,
            content: '222<p>我是段落</p>'
        },
        methods: {
        }
    })
</script>

在这里插入图片描述
*v-bind 元素属性的绑定可以简写成：
v-on 元素事件的绑定可以简写成 @
例子：实现照片的显示与隐藏

<body>
    <div id="app">
        <!-- 元素属性的绑定 -->
        <!-- <img v-bind:src="src" alt=""> -->
        <img :src="src" alt="">
        <!-- <input type="text" name="" id="" v-bind:value="value"> -->
        <input type="text" name="" id="" :value="value">
           <!-- 元素事件的绑定 -->
            <!-- <button v-on:click="change">实现照片的显示与隐藏</button> -->
        <button @click="change">实现照片的显示与隐藏</button>
    </div>
</body>
</html>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            src: '../images/left3.jpg',
            value: 123,
        },
        methods:{
            change(){
                if(this.src=='../images/left3.jpg'){
                    this.src=''
                }else{
                    this.src='../images/left3.jpg'
                }
            }
        }
    })
</script>

4.事件修饰符（可以链式调用，连点）

.stop阻止事件冒泡，阻止事件继续向外传播，从里往外触发。

 <div id="app">
        <div class="one"  @click="one">
            <div class="two"  @click.stop="two">
                <div class="three"  @click="three">
                </div>
            </div>
        </div>
    </div>

.capture 添加事件捕获，从外往里捕获，先捕获后冒泡。

<div id="app">
        <div class="one"  @click.capture="one">
            <div class="two"  @click="two">
                <div class="three"  @click="three">
                </div>
            </div>
        </div>
    </div>

.self 当事件作用于元素本身时才触发。

<div id="app">
        <div class="one"  @click.self="one">
            <div class="two"  @click="two">
                <div class="three"  @click="three">
                </div>
            </div>
        </div>
    </div>入代码片

.once 事件只会触发一次。

<div id="app">
        <div class="one"  @click.once="one">
            <div class="two"  @click="two">
                <div class="three"  @click="three">
                </div>
            </div>
        </div>
    </div>

.prevent 阻止默认事件

<div id="app">
        <a href="https://www.baidu.com" @click.prevent="jump">百度一下</a>
    </div>

css代码

  <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
        .two {
            width: 150px;
            height: 150px;
            background-color: rgb(227, 158, 67);
        }
        .three {
            width: 100px;
            height: 100px;
            background-color: rgb(93, 187, 59);
        }
    </style>

script部分

<script>

    let vm=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            one(){
                console.log('one')
            },
            two(){
                console.log('two')
            },
            three(){
                console.log('three')
            },
            jump(){
                console.log('跳转了')
            }
        }
    })
</script>

小铭同学123

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue基础

提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。构建用户界面的渐进式框架，采用自底向上逐层应用开发，核心理念是数据驱动视图，组件化开发。是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。相同点：v-text和v-html的都会替换标签中原有的内容。不同点：不同点：v-html会解析富文本，v-text不会。作用：将数据渲染到页面上，可以做简单的运算。元素事件的绑定可以简写成。元素属性的绑定可以简写成。
复制链接

扫一扫