vue

最新推荐文章于 2024-03-01 09:53:15 发布

南辰君

最新推荐文章于 2024-03-01 09:53:15 发布

阅读量163

点赞数

分类专栏： vue 笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_43172743/article/details/108238640

版权

笔记同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

VUE

jQuery类库选择器

前端框架

vue是一款渐进式的JavaScript框架，用动态构建用户界面。

遵循MVVM模式
编码简洁、体积小、运行效率高，适合移动端/PC端的开发
本身只关注UI，可以轻松引入vue插件或者其他第三库开发项目
国内大规模使用、生态系统完善

官方地址：https://cn.vuejs.org/

作者：尤雨溪，曾就职Google

WebStorm开发提示：

MVVM模式：

model：模型

viewModel：中间连接的桥梁

View：视图

双向数据绑定：现在这个不能跟用户交互，都是直接展示的，也就是说，模型（Model）的内容发生变化，会直接更新到视图中。同理，视图这边（比如说用户输入东西或者其他）发生变化，也是同步到模型这边。

{{ }}语法说明：

{{ }}可以插入文本，上面的案例就是；
{{ }}中可以插入JavaScript表达式；

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split(' ').reverse( ).join(' ') }} //把一个消息空格分隔，然后反转（倒着输出）

{{ }}中只支持表达式，不支持其它语句

{{ var a = 1 }}
{{ if (ok) { return message } }}

{{ }}表示可以在里面插入内容

v-test：

用于渲染普通文本，替换标签全部内容。

{{}}会替换出现插值表达式的位置

v-text和{{}}表达式渲染数据，不解析标签。

v-html：

如果你想输出真正的 HTML，你需要使用v-html指令，v-text仅渲染标签，不能解析 HTML 代码。

替换标签全部内容

v-html可以识别字符串中的标签

v-html不仅可以渲染数据，而且可以解析标签。

注意：动态渲染的HTML容易导致XSS攻击，只对可信内容使用v-html插值，绝对不要对用户提供的内容使用插值，不推荐使用v-html

v-bind：

{{ }}、v-text、v-html语法不能作用在HTML标签的属性上；
v-bind指令可以用于响应式的更新HTML标签的属性

<div title="{{message}}"></div>是无法使用的，后台会报错，要使用v-bind

这种标签属性的话用法：

<body>
    <div id="app">
        <a v-bind:href="url">{{content}}</a>
        <!-- disabled是按钮是否可使用 -->
        <button v-bind:disabled="disabled">按钮</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            url: 'http://www.baidu.com',
            content: '百度',
            disabled: true
        }
    })
</sript>

如果isButtonDisabled的值是null、undefined或false，则disabled attribute甚至不会被包括在渲染出来的<buttion>元素中。

缩写：

<!-- 缩写 -->
<a href="url">{{content}}</a>
<button :disabled="disabled">按钮</button>

可以直接使用:不用写v-bind

v-on：

绑定事件

<body>
    <div id="app">
        点击次数：{{count}}
        <button v-on"click="count+=1">点击</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0
        }
    })
</script>

点击增加一次

缩写：

<body>
    <div id="app">
        <!-- <button v-on:click="count+=1">点击</button> -->
        <!-- 编写 -->
        <button @click="count+=1">点击</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            count: 0
        }
    })
    console.log(vm.$data.count)
</script>

js部分可以同上张图不改变，直接在@click中只能书写这些简单的，复杂的方法只能在methods中去定义

methods中定义方法：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <div id="app">
         点击次数：{{count}}
         <!-- <button v-on:click="count += 1">点击</button> -->
         <!-- 缩写 -->
         <!-- <button @click="count += 1">点击</button> -->
         <button @click="funCount" :disabled="disabled">点击</button>
      </div>
   </body>
   <script src="js/vue.js"></script>
   <script>
      let vm = new Vue({
         el: '#app',
         data: {
            count: 0,
            disabled: false,
            message: ''
         },
         methods: {  //methods中可以定义方法
            funCount : function(){
               //this.count ++;//同样的作用，也是+1
               //如果点击到10之后，按钮禁用
               if(this.count == 10){
                  this.disabled = true
               }else{
                  this.count += 1;
               }
            }

         }
      })
      //console.log(vm.$data.count)
   </script>
</html>

funCount不能写做funCount(),funCount是（是事件：是放什么的时候才调用这个函数）在这只是声明一下，点的时候才调用这个函数

funCount()是调用函数

内联处理器中的方法：

除了直接绑定一个方法，也可以在内联JavaScript语句中调用方法：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <div id="app">
         点击次数：{{count}}
         <!-- <button v-on:click="count += 1">点击</button> -->
         <!-- 缩写 -->
         <!-- <button @click="count += 1">点击</button> -->
<!--         <button @click="funCount" :disabled="disabled">点击</button>-->
         <button @click="say('jack')">sayHi</button>
         {{message}}
      </div>
   </body>
   <script src="js/vue.js"></script>
   <script>
      let vm = new Vue({
         el: '#app',
         data: {
            count: 0,
            disabled: false,
            message: ''
         },
         methods: {  //methods中可以定义方法
            funCount : function(){
               //this.count ++;//同样的作用，也是+1
               //如果点击到10之后，按钮禁用
               if(this.count == 10){
                  this.disabled = true
               }else{
                  this.count += 1;
               }
            },
            say: function (name){
               this.message = 'hello' + name;
            }

         }
      })
      //console.log(vm.$data.count)
   </script>
</html>

事件冒泡和捕获：

点击div时只会弹出div，而点击button时会先弹出button然后再弹出div，这个就称为事件的冒泡（就是button在div容器中的，点击button时会把他父容器的事件都集连着出发，从里往外触发）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello Vue</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: aqua;
        }
        button {
            margin-top: 100px;
            margin-left: 100px;
        }
    </style>
</head>
<body>
    <div>
        <button>按钮</button>
    </div>

    <script>
        // 点击div时只会弹出div，而点击button时会先弹出button然后再弹出div，这个就称为事件的冒泡
        // 就是button在div容器中的，点击button时会把他父容器的事件都集连着出发，从里往外触发
        // querySelector是原生的jQuery提供的选择器，这里面也支持标签选择器
        // addEventListener添加一个方法
        // document.querySelector('div').addEventListener('click',function (){
        //     alert('div');
        // });
        // document.querySelector('button').addEventListener('click',function (){
        //     alert('button');
        // });

        //在原生js绑定中，后面时有一个参数(false位置)，有冒泡和捕获
        //默认为冒泡：false，先触发子容器事件再触发父容器的事件
        // document.querySelector('div').addEventListener('click',function (){
        //         alert('div');
        // },false);
        //
        // document.querySelector('button').addEventListener('click',function (){
        //     alert('button');
        // },false);

        //捕获：先触发父容器的事件，再触发子容器的事件
        //true为捕获
        document.querySelector('div').addEventListener('click',function (){
            alert('div');
        },true);

        document.querySelector('button').addEventListener('click',function (){
            alert('button');
        },true);
    </script>
</body>
</html>

事件修饰符：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。为了解决这个问题，Vue.js为 v-on 提供了事件修饰符。修饰符是由开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once

.prevent 阻止事件的默认行为

.stop 阻止事件冒泡

,stop.prevent 阻止默认行为和冒泡

.self 阻止子元素的事件冒泡（使用于父元素上）

.capture 事件的捕获（使用于父元素上）

.once 事件只被触发一次

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Hello Vue</title>
   <style>
      div {
         width: 300px;
         height: 300px;
         background-color: aqua;
      }
      button {
         margin-top: 100px;
         margin-left: 100px;
      }
   </style>
</head>
<body>
   <div id="app">
      <!-- 默认为事件冒泡 -->
      <div @click="funDiv">
         <button @click="funButton">按钮</button>
         <a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
      </div>
      <!-- .stop 阻止事件的冒泡 -->
      <div @click="funDiv">
         <button @click.stop="funButton">按钮</button>
         <a href="http://www.baidu.com" @click.prevent.stop="funHref">百度</a>
      </div>
      <hr>
      <!-- .self 阻止子元素的冒泡 -->
      <div @click.self="funDiv">
         <button @click="funButton">按钮</button>
         <a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
      </div>
      <hr>
      <!-- .capture 事件的捕获（使用于父元素上） -->
      <div @click.capture="funDiv">
         <button @click="funButton">按钮</button>
         <a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
      </div>
   </div>

   <script src="js/vue.js"></script>
   <script>
      new Vue({
         el: '#app',
         methods: {
            funDiv: function (){
               alert('div')
            },
            funButton: function (){
               alert('button')
            },
            funHref: function (){
               alert('href')
            }
         }
      })
   </script>
</body>
</html>

.preven 阻止元素的默认

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
</head>
<body>
   <div id="app">
       <!--原生js写法-->
      <!--<a href="Javascript:void(0)" @click="fun">百度</a>-->
      <!--vue的方法-->
      <!-- .preven 阻止元素的默认事件 -->
      <a href="https://www.baidu.com" @click.prevent="fun">百度</a>
   </div>
</body>
<script src="js/vue.js"></script>
<script>
   new Vue({
      el: '#app',
      methods: {
         fun: function (){
            alert('aaa')
         }
      }
   })
</script>
</html>

事件

.once 表示这个事件只触发一次

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
</head>
<body>
   <div id="app">
      <!--原生js写法-->
      <!--<a href="Javascript:void(0)" @click="fun">百度</a>-->
      <!--vue的方法-->
      <!-- .preven 阻止元素的默认事件 -->
      <!-- .once 表示这个事件只触发一次 -->
      <a href="https://www.baidu.com" @click.prevent.once="fun">百度</a>
   </div>
</body>
<script src="js/vue.js"></script>
<script>
   new Vue({
      el: '#app',
      methods: {
         fun: function (){
            alert('请扫描二维码！')
         }
      }
   })
</script>
</html>

.self 表示阻止子元素的事件冒泡

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Hello Vue</title>
   <style>
      div {
         width: 300px;
         height: 300px;
         background-color: aqua;
      }
      button {
         margin-top: 100px;
         margin-left: 100px;
      }
   </style>
</head>
<body>
   <div id="app">
       <!-- .self 阻止子元素的冒泡 -->
      <div @click.self="funDiv">
         <button @click="funButton">按钮</button>
         <a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
      </div>
   </div>

   <script src="js/vue.js"></script>
   <script>
      new Vue({
         el: '#app',
         methods: {
            funDiv: function (){
               alert('div')
            },
            funButton: function (){
               alert('button')
            },
            funHref: function (){
               alert('href')
            }
         }
      })
   </script>
</body>
</html>

.capture表示事件的捕获事件（作用于父元素上）

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Hello Vue</title>
   <style>
      div {
         width: 300px;
         height: 300px;
         background-color: aqua;
      }
      button {
         margin-top: 100px;
         margin-left: 100px;
      }
   </style>
</head>
<body>
   <div id="app">
      <!-- .capture 事件的捕获（使用于父元素上） -->
      <div @click.capture="funDiv">
         <button @click="funButton">按钮</button>
         <a href="http://www.baidu.com" @click.prevent="funHref">百度</a>
      </div>
   </div>

   <script src="js/vue.js"></script>
   <script>
      new Vue({
         el: '#app',
         methods: {
            funDiv: function (){
               alert('div')
            },
            funButton: function (){
               alert('button')
            },
            funHref: function (){
               alert('href')
            }
         }
      })
   </script>
</body>
</html>

南辰君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue

VUEjQuery类库选择器前端框架vue是一款渐进式的JavaScript框架，用动态构建用户界面。遵循MVVM模式编码简洁、体积小、运行效率高，适合移动端/PC端的开发本身只关注UI，可以秦松引入vue插件或者其他第三库开发项目国内大规模使用、生态系统完美MVVM模式：model：模型viewModel：中间连接的桥梁View：视图双向数据绑定：现在这个不能跟用户交互，都是直接展示的，也就是说，模型（Model）的内容发生变化，会直接更新到..
复制链接

扫一扫