[学习笔记]vue-前端框架

其他 2020-04-22 11:58:17 阅读次数: 0

1 Vue引言：

  • 渐进式JavaScript框架，让我们通过操作很少的DOM（文档对象模型），设置不需要操作页面中任何DOM，很容易完成数据和视图的绑定。其中的架构模式：双向绑定MVVM
    注： 在使用Vue中，页面中不要引入JQuery框架。

2 安装：

  • <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ：开发版本
  • <script src="https://cdn.jsdelivr.net/npm/vue"></script> ： 生产版本

3 vue第一个入门应用

  • 新建html5页面：vue-01-helloworld.html
  • 引入vue.js
  • 创建vue实例，渲染进div标签。注:实例应该在渲染的标签之后
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门第一个案列</title>
</head>
<body>
    <div id="app">
       {{ message }}  <!--双大括号进行变量渲染-->
    </div>
</body>

<!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个vue实例
    const app = new Vue({
        el: "#app",  //用来给vue实例定义一个作用范围（如下文div标签中的div的id）
        data:{       //用来给vue实例定义一些相关的数据
            message: "Hello Vue!"
        },
    })
</script>
</html>

补充：span标签就是分段。为什么要用span标签？因为样式的问题。打个比方说，你一个块中有很多段内容，要求每段内容显示不同的样式，这时就可以用到span标签。另外配合CLASS属性，让样式更灵活。
span在行内定义一个区域，也就是百一行内可以被span划分成好几个区域，从而实现某种特定效果。span本身没度有任何属性。span 与div
span在CSS定义中属于一个行内元素，而div是块级元素，我们可能通俗地理解为div为大容器，大容器当然回可以放一个小容器了答,span就是小容器。
总结：

  • vue实例中的el属性，代表vue的作用范围，日后在vue的作用范围内都可以使用vue的语法。
  • vue实例对象中的data属性，用来给vue实例绑定一些相关的数据。
  • 在使用{{}}进行获取data中的数据时，可以在{{}}中直接书写表达式，运算符，调用相应方法，以及逻辑运算等等。
  • vue中的el属性不止可以绑定标签的id字段，还可以绑定任意的字段，vue推荐是id。

Example: 字符，对象，数组，数组对象

<body>
    <div id="app">
        {{user.name}}<br/>{{user.age}}<br/>{{array1[0]}}<br/>
        {{array2[0].name}}<br>{{array2[0].age}}<br>{{lists}}<br>{{lists[2]}}<br>
        {{message+'!'}}<br>{{message.toUpperCase()}}
    </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个vue实例
    var app = new Vue({
        el: "#app",
        data:{
            message: "Hello Vue!",
            username: "dachui",
            user:{name:"dachui",age:18},
            array1:[1,2,3,4],
            array2:[{name:'ganggang',age:18},{single:'Yes'}],
            lists:["北京",'上海',"深圳"],
        },
    })
</script>

4 v-text和v-html:

  • v-text: 用来获取data中的数据将数据以文本的形式渲染到执行标签的内部。类似js中的innerTEXT
<body>
   <div id="app" class="aa">
       <span v-text="msg"></span><br>
       <span v-html="msg"></span>
   </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el:"#app",
        data:{
            msg:"demo test for v text.",
        }
    })
</script>

总结：{{}}插值表达式和v-text的区别 1>v-text会将标签原有的值覆盖，{{}}不会覆盖；2>使用v-text可以避免在网络环境较差的情况下出现插值闪烁。

  • v-html:用来获取data中的数据，将数据中含有的html标签先解析再渲染到指定标签的内部。类似js中的innerHTML
    在这里插入图片描述
    5 vue的事件绑定:
<body>
  <div id="app">
      <h3>{{message}}</h3>
      <h3 v-text="message"></h3>
      <h3>年龄：{{age}}</h3>
      <input type="button" value="点我增加年龄" v-on:click="changeAge"/>
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义一个vue实例
    var app = new Vue({
        el: "#app",
        data:{
            message: "Monet欢迎你！",
            age:23,
        },
        methods:{
            changeAge:function(){
                this.age = this.age + 1; //在函数中，this就相当于当前vue实例。==>this.age++;
            }
        }
    })
</script>

或者这样写：

<body>
   <div id="app">
       <h3>{{age}}</h3>
       <input type="button" value="v-on增加年龄" v-on:click="addage">
       <input type="button" value="@替换v-on减少年龄" @click="minusage">
   </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vapp=new Vue({
        el:'#app',      //定义vue实例绑定作用域
        data:{age:23,},    //定义vue实例相关数据
        methods:{
            addage:function () {
                this.age++;
            },
            minusage(){
                this.age--;
            }
        }, //定义vue实例事件的处理函数
    })
</script>
</script>

总结：

  • v-on:事件名=“函数名” eg:v-on:click=“changeAge”。函数定义再vue实例中的methods:{}块中。
  • 可以通过@click替换v-on:click，如例。
  • 在vue实例中，this就是指当前实例本身。可以通过this获取当前实例的相关数据
  • 函数名:function(){} 等价与 函数名(){}
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vapp=new Vue({
        el:'',      //定义vue实例绑定作用域
        data:{},    //定义vue实例相关数据
        methods:{}, //定义vue实例事件的处理函数
    })
</script>

6 vue事件的参数传递：

<body>
  <div id="app">
      <span>{{age}}</span><br>
      <input type="button" value="传值" @click="changeage(30,'monet')">
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vapp=new Vue({
        el:"#app",
        data:{
            age:18,
        },
        methods:{
            changeage(count,name){
              this.age =name +':'+ count;
            },
        }
    })
</script>

总结：

  • 传的参数直接写在函数后面的括号里，且vue实例的函数中定义变量接收
  • 传多个参数用逗号分隔，字符用单引号包括。

Example:

<body>
   <div id="app">
       <input type="button" value="-" @click="countf('-')">
       <h2>{{count}}</h2>
       <input type="button" value="+" @click="countf('+')">
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            count:1
        },
        methods:{
            countf(act){
                if (act==='+'){
                    if(this.count<10){
                        this.count++;
                    }else{
                        alert('每人购买不超过10件');
                    }
                }else {
                    if (this.count===1){
                        alert('count最小为1');
                        return;
                    }
                    this.count--;
                }
            }
        },
    })
</script>

7 v-show, v-if, v-bind

  7.1. v-show用来控制页面中某个元素是否展示，底层控制是变迁display属性。

<body>
  <div id="app">
     <h3 v-show="true">Monet欢迎你</h3>
      <h3 v-show="show">ganggang欢迎你</h3>
      <input type="button" value="展示隐藏标签" @click="showtab">
      <h3 v-show="age>=30">dachui欢迎你</h3>
      <input type="button" value="通过修改值控制展示" @click="showage">
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            show:false,
            age:18,
        },
        methods:{
            showtab(){
              this.show=!this.show;
            },
            showage(){
              this.age = 31;
            },
        },
    })

总结：v-show可以直接书写Boolean值控制标签元素展示，也可以通过变量表达式控制展示。

7.2： v-if： 用来控制页面元素是否展示。底层控制是DOM元素

<body>
   <div id="app">
       <h2 v-if="show">展示了大锤</h2>
       <input type="button" value="展示大锤？" @click="showOrnot">
   </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            show:false
        },
        methods:{
            showOrnot(){
                this.show=!this.show;
            }
        },
    })
</script>

7.3 v-bind:用来给标签绑定相应属性，从而通过vue动态修改标签属性。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .aa{
            border:2px red solid;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2></h2>
        <img width="300" v-bind:title="msg" v-bind:class="css" src="test.png">
        <br>
        <img width="300" v-bind:title="msg" v-bind:class="showCss?'aa':''" v-bind:src="src">
        <input type="button" value="改变图片" @click="changep">
        <br>
        <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" v-bind:src="src">
        <input type="button" value="动态控制加入样式" @click="addCss">
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            msg:'桌面截图',
            css:"aa",
            showCss:true,
            src:"test.png",
        },
        methods:{
            addCss(){
              this.showCss = !this.showCss;
            },
            changep(){
                this.src = "test1.png";
            }
        },
    })
</script>

注意：v-bind的语法是 v-bind:属性，  简化后为  :属性。 eg: v-bind:class----> :class

<img width="300" v-bind:title="msg" v-bind:class="showCss?'aa':''" v-bind:src="src">
<img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}" :src="src">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app=new Vue({
        el:'#app',
        data:{
            msg:'桌面截图',
            css:"aa",
            showCss:true,
            src:"test.png",
        },
        methods:{
            addCss(){
              this.showCss = !this.showCss;
            },
            changep(){
                this.src = "test1.png";
            }
        },
    })
</script>

8 v-for 和 v-model:

8.1: v-for的作用就是用来对数组或对象进行遍历的。

<body>
  <div id="app">
      <span v-for="u in user">
          {{u}}
      </span>
      <br>
      <span v-for="(value,key) in user">
          {{key}} : {{value}}
      </span>
      <br>
      <span v-for="(value,key,index) in user">
          {{index+1}} : {{key}} : {{value}}<br>
      </span>
      <br>
      <ul>
          <li v-for="a in userlist" :key = "user.mark">
              {{a.name}}:{{a.age}}
          </li>
          <li v-for="a,index in alist">
              {{index+1}} {{a}}
          </li>
      </ul>
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {
            alist:['one','two','three'],
            user:{name:"Monet",age:23},
            userlist:[
                {name:"dachui",age:18},
                {name:"ganggang",age:27}
            ],
        },
        methods: {},
    })
</script>

总结：在使用v-for时，一定要注意加入:key , 用来给vue内部提供重用和排序的唯一key。

8.2 v-model: 体现了vue中数据的双向绑定(重点)。 
           ：用来绑定标签元素的值与vue实例对象中data数据的值保持一致。从而实现双向的数据绑定机制。

<body>
  <div id="app">
      <input type="text" v-model="inmsg" />
      <span>{{inmsg}}</span>
      <hr>
      <input type="button" value="改变双向绑定的值" @click="changedata">
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {
            inmsg:'dachui',
        },
        methods: {
            changedata(){
                this.inmsg = "大锤魔怔了";
            },
        },
    })
</script>

总结：v-model的双向绑定指的是：表单中数据的变化导致vue实例中data的变化；vue实例中data的变化也会导致表单中的数据变化；

 MVVM架构：双向绑定。
 Model: 数据 （vue实例中绑定的数据）
 VM: ViewModel（相当于监听器）
 View: 页面（页面中展示的数据）
 model中数据有变化会被监听器传递给view; view中数据有变化也会被监听器传递给model

Example:

<body>
  <div id="app">
      <input type="text" v-model="msg">
      <input type="button" value="添加记事" @click="addnote">
      <br>
      <ul>
          <li v-for="item,index in notebooks">
              {{index+1}} {{item}} <a href="Javascript:;" @click="delrow(index)" >删除</a>
          </li>
      </ul>
      <br>
      <span>总数量：{{notebooks.length}} 条</span><br>
      <input type="button" value="删除所有" @click="delall" v-show="notebooks.length!=0">
  </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {
            notebooks:["Monet改名邹大锤了","邹大锤今天魔怔了"],
            msg:"",
        },
        methods: {
            addnote(){
              this.notebooks.push(this.msg);
              this.msg="";
            },
            delrow(index){
                this.notebooks.splice(index,1)//参数一：从哪个下标开始删除； 参数二：删除几个元素。
            },
            delall(){
                this.notebooks=[];
            },
        },
    })
</script>

前端效果：
在这里插入图片描述
9 事件修饰符：

修饰符：用来和事件连用，决定事件触发条件或阻止事件触发机制。
常用的事件修饰符： stop,prevent,capture,self,once,passive.

9.1 stop:用来阻止事件冒泡。

<body>
 <div class="aa" id="app" @click="click1">
    <input type="button"  value="按钮" @click.stop="click2">
 </div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {},
        methods: {
            click1(){
                alert("div的点击");
            },
            click2(){
              alert("input的点击");
            },
        },
    })
</script>

总结：如上，div标签和input的标签都有click事件，点击input的click事件后会自动触发其父节点的相同事件。
这个时候就用stop修饰符组织这样的冒泡发生。

9.2 prevent： 阻止标签的默认行为。如下例，就阻止了超链接跳转到百度。

<a href="https://www.baidu.com/" @click.prevent="click3">baiduUrl</a>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {},
        methods: {
            click1(){alert("div的点击");},
            click2(){alert("input的点击");},
            click3(){},
        },
    })
</script>

9.3 self:用来针对当前标签的事件触发。只触发自己标签上特定的事件，不监听事件冒泡，比如div标签内存在click事件，
    如果其div块中其他的标签上也存在click事件，那div标签会监听里面的click事件，里面的click事件发生，
   div的click事件也会发生。这个时候可以在divclick事件上加上@click.self

<div id="app">
      <div class="aa" @click="click1">
          <input type="button"  value="按钮" @click.stop="click2">
      </div>
      <hr>
      <div class="aa" @click.self="click1">
          <input type="button"  value="按钮" @click="click2">
      </div>
      <br>
      <a href="https://www.baidu.com/" @click.prevent="click3">baiduUrl</a>
  </div>

9.4 once:就是让指定事件只触发一次。

<div class="aa" @click.self="click1">
    <input type="button"  value="按钮" @click="click2">
    <input type="button"  value="按钮只触发一次" @click.once="click2">
</div>

10 按键修饰符

按键修饰符是与键盘中按键事件绑定在一起的，用来修饰特定的按键事件。
常用的有：enter,tab,delete,esc,space,up,down,left.right

<div id="app">
    <input type="text" v-model="msg" @keyup.enter="keyup1">
</div>
</body>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const test1 = new Vue({
        el: "#app",
        data: {
            msg:'',
            shows:false,
        },
        methods: {
            keyup1(){
                alert("enter触发");
            },
        },
    })
</script>
杰夫先生going
发布了7 篇原创文章 · 获赞 0 · 访问量 100
私信 关注

猜你喜欢

转载自blog.csdn.net/szwdong_jeff/article/details/105611026
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022