vue

发布时间:2021-06-15 22:15:21 浏览量:124 标签: vue基础

vue的定义:

* 就是js的一个框架
* 框架:前端框架 BootStrap  Jq    后端框架  使用框架的目的是为了帮我们完成快速开发 框架  不等于 难

Vue的官方网站

  • https://cn.vuejs.org/

  • 点击 起步 能看到vue的手册 然后点击安装教程

  • vue框架会分为:开发版(在程序员开发阶段使用的版本,有错误提示)和生产版(上线版.没有错误提示)

    • 在学习的时候,也是需要使用开发版

    • 下载完成后,直接使用script标签引入即可

vuejs代码写在哪里  

  • vuejs是js框架,所以,我们也需要把vue的代码,写在HTML文件中

  • <script>
    js代码
    </script>
    <script src="jquery.xxxx.xxx.js">

    </script>

    <script>
    jq代码
    </script>

    <script src="http://xxxx.2.xxxxx.vue.js">

    </script>

    <script>
    vue代码
    </script>


vue简介

  • vue是什么??

    • 渐进式框架

  • vue框架和jq的关系??

    • js
      document.getElementById();  找对象 获取元素
      jq
      $('.box')
      改属性
    • vue不操作dom 操作数据
    • $('选择器').方法()

    • jq和js都是操作dom

vue的使用

  • 引入 vue框架

  • 创建html文档

  • vue的基本框架结构
    <script>
     new Vue({
      键:值
      el:"元素"  //控制vue对象的操作范围,
      data:{
       键:值,
       键2:值2.
       ...
       例如:
       name:'小潘'
      }
     })
    </script>
  • 如何把vue中的data中的数据渲染到页面上

  • JS:
    // var app = document.getElementById('app');
       // app.innerHTML="么么哒,我的宝贝";
    vue
    如何把数据渲染到页面中
    使用文本插值: {{变量}}  {{键}}  文本插值

双向数据绑定

  • vue双向数据绑定

    • script
       new Vue({
             el:"#app",
             data:{
                 inval:''
             }
         })
      html
       <div id="app">
           <!-- <input type="text" v-model="data中数据变量" /> -->
           <input type="text" v-model="inval">
          <p>{{inval}}</p>
         </div>
    • 如何完成绑定

    • //使用js完成双向数据绑定:
         //1.动态获取input中输入的数据  使用oninput事件

           input.oninput = function(){
               //console.log('执行了');
              //获取input中的value值
              let inval = input.value;
               //console.log(inval);
               // 把表单中的数据插入到指定的元素中
               p1.innerHTML = inval;
           }

MVVM介绍

  vue中的数据绑定的模式:

    mvvm

    M  ->  model层 数据层(data)

    V   -> view层  视图层

    VM ->viewmodel层  是 连接 v层和m层

    数据层中的数据,是我们自己定义的,将来数据页可以是从接口中获取过来的

    

    视图层 -> 视图模型层 ->数据层 ->视图模型层 -> 视图层

    V -> VM -> M ->VM ->V

    注意:v-model 一方面监听dom变化.另一方面把监听到的数据给data



文本插值


    {{}} 可以把data中的数据渲染到页面中 ,必须在vue的操作范围内

    {{变量}}

    {{}}里边也可以使用简单的计算

    {{变量+5}}


使用vue实现数据双向绑定

需要使用 v-model="值"

例子:

image.pngimage.png



系统指令

 系统指令:

            v-xxx

            v-model 双向数据绑定


            v-pre  原样输出(可以让插值语法变成文本模式,不解析)

            指令需要写在元素中

                不是所有的指令都必须有值


            v-html指令:可以解析html代码

                指令值是data中的键

                注意:写在data中变量的数据,如果是代码,默认是不会被解析的,为了防止XSS攻击

                XSS攻击:XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到   网页

                语法格式:

                    <元素 v-html="data中的变量">{{b}}</元素>

                    如果写了指令中数据的渲染,{{}}中的数据会被指令覆盖



            v-text指令  等价于 {{}}

                语法格式:

                    <元素 v-text = "data中的数据"></元素>


            注意:写在指令中值中的变量,不能使用{{}}



             v-if

                可以控制元素的显示或隐藏,指令的值是布尔类型,如果值为true,表示显示元素,如果值为false.表示不  显示元素

                语法格式:

                    <元素 v-if="布尔|表达式|变量"></元素>

                    v-if的值得是一个变量



            v-show

                控制元素显示或隐藏,值也是布尔类型


            v-if和v-show的区别:

                v-if的指令的如果为false,就删除节点

                v-show的指令值为false 就是给当前的元素添加一个style属性并设置值为 display:none


                前端:频繁的删除添加节点,是对资源的消耗比较大,给元素设置属性对资源的消耗比较小,所以,频繁的

                对元素显示或隐藏就使用v-show,反之使用v-if


image.png

image.png


   vue初始化页面闪动问题如何解决:

            使用vue中的斗篷:

                    1.定义一个css样式表

                        语法格式:

                            [v-cloak]{

                                属性:属性值;

                                display:none;

                            }

                    2.使用系统中的v-cloak指令

                            <元素 v-cloak></元素>


                    使用时机:

                            由于网路原因,vue.js没有被加载完成,导致页面渲染的时候,出现闪动问题(出现了语法{{}}),

                            使用斗篷解决,给斗篷加样式表,给元素加斗篷,斗篷中的display会在vue.js加载完成后,实例对  象完成后自动清除

    

例如:

                 <style>

                        [v-cloak]{

                            displaynone;

                        }

                    </style>


                   <div id="app">

                         <p v-cloak>{{str}}</p> 

                    </div>

                

                <script>

                    new Vue({

                        el:"#app",

                        data:{

                           str:"这是一个自负传"

                        }

                    })

                </script>



vue绑定事件

  vue中事件的绑定

            需要使用指令  v-on 指令

                语法格式:

                    v-on:事件名称 = "对应的方法"

                    简写为:

                        @事件名 = 方法  推荐使用


        vue中方法如何声明

            data{},

            methods:{

                函数名:function(){

                    函数体

                }

            }


        关于方法调用:

            可以通过事件的方式调用方法  @事件 = 方法名

            主动调用:

                在v中使用{{函数名(实参)}}


            形参可以传递给实参


            在vue中的方法中使用其它数据的方式有:

                1.在调用函数的时候传递的参数

                2.获取vue对象中的data数据

例如:

        

 <div id="app">

        <button v-on:click="fun()">大白裙子</button>

        <button @click="fun2()">爱你哦</button>

        {{name}}

        <!-- {{函数名()}} -->

        <!-- {{fun3('123')}} -->

     </div>


    <script>

       new Vue({

            el:"#app",

            data:{

                name:"abc"

            },

            methods:{

                fun:function(){

                    alert("啊~~~啊~~~~~喔~~");

                },

                fun2:function(){

                    this.name = "大张伟";

                },

                fun3:function(n){

                    //在方法中获取data中值的时候,需要使用this

                    //获取name属性的属性值

                    console.log(this.name);

                    this.name = "大张伟";

    

                }

            }

       })

    

      </script>



搜索
关于我
吴英赫
最新标签
推广