zoukankan      html  css  js  c++  java
  • Vue初识

    渐进式JavaScript框架

    通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架的形式完成整个web前端项目

    什么是Vue

    vue可以独立完成前后端分离式web项目的JavaScript框架

    为什么要学习Vue

    三大主流框架之一:Angular React Vue
    先进的前端设计模式:MVVM
    可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发

    Vue优点

    1.单页面:高效
    2.虚拟DOM:页面缓存
    3.数据的双向绑定:数据是具有监听机制
    4.数据驱动:从数据出发,不是从DOM出发

    Vue使用

    1.下载vue.js:https://vuejs.org/js/vue.js


    2.在要使用vue的html页面通过script标签引入

    <script src="js/vue.js"></script>

    3.在html中书写挂载点的页面结构,用id表示

    <div id="app">
        <h1>{{h1msg}}</h1>
        <h2>{{h2msg}}</h2>
    </div>
    
    
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app', //挂载点
    

    4.在自定义的script标签实例化Vue对象,传入一个大字典

     data: { //为挂载点页面结构提供数据
                h1msg: 'h1内容',
                h2msg: 'h2内容'
            }
        })

    5.在字典中通过 el与挂载点页面结构绑定,data为其通过数据

    vue完成简单的事件

    {{ msg }}这种被两个大括号包住的叫插值表达式 也叫vue变

    <body>
    <div id="app">
        <h1 v-on:click="clickAction">h1的内容是{{ msg  }}</h1>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'内容 '
    
            },
            methods:{//为挂载点提供事件
                clickAction:function () {
                    alert(123)
    
                }
    
            }
        })
    </script>

    Vue操作页面样式

    <body>
    <div id="app">
        <!--只要数据值一样的都是一起被改变-->
        <p v-on:click="btnClick" v-bind:style="v_style">点击文字颜色变为绿色</p>
        <div v-on:click="btnredclick" v-bind:style="r_style">点击文字颜色变为红色</div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                v_style:{
                    color:'black'
                },
                r_style:{
                    color: 'black'
                }
            },
            methods:{
                btnClick:function () {
                    this.v_style.color = 'green';
                },
                btnredclick:function () {
                     this.r_style.color = 'red'
                }
            }
        })
    </script>

    只要变量一样的都是一起被改变

    1.vue通过 v-* 指令来控制标签
    2.vue通过 变量 来驱动页面

    文本指令

    将data里面的数据能够直接渲染给html页面的指令就是文本指令

    <body>
    <div id="app">
    
        <p>{{ msg1 }}</p>
        <!--插值表达式就是v-text的简写-->
        <p v-text="msg2"></p>
        <!--v-html会解析html代码-->
        <p v-html="msg3"></p>
        <!--v-once是限制这个变量只能被操作一次,一旦被赋初始值了就不改变,还需要用插值表达式渲染出来-->
        <p v-once="msg3"  v-on:mouseover="action">{{msg3}}</p>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg1: '**msg1**',
                msg2: '<b>**msg2**</b>',
                msg3: '<b>**msg3**</b>',
    
            },
            methods: {
                action: function () {
                    //不能直接this.data.msg4直接拿到,需要声明一个变量
                    this.msg3 = '<i>**msg3**</i>';
    
    
    
                }
            }
        })
    
    </script>

    斗篷指令

    页面如果vue没加载成功,现在页面上吧双大括号显示出来,当vue记载成功再渲染,比如cdn加载过来,先把你要加载的东西隐藏掉

    事件指令

    <body>
    <div id="app">
        <!--v:on:事件名="函数名" 可以简写为@事件名="函数名"-->
        <p v-on:click="action1">{{ msgs[0] }}</p>
        <p @click="action2">{{ msgs[1]}}</p>
    
        <ul>
            <!--要区别点击的是哪一个,需要加括号传参-->
            <li @click="liAction(1)">列表项1</li>
            <li @click="liAction(2)">列表项2</li>
            <li @click="liAction(3)">列表项3</li>
        </ul>
        <!--鼠标事件的对象 直接写函数名,默认把鼠标事件对象传入,可以获取到x,y轴-->
        <div @click="func1">func1</div>
        <!--又要传参又要事件对象就多传一个参数,一旦加了括号就要手动传参,$event代表事件对象-->
        <div @click="func2($event,'abc')">func2</div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msgs:['11111','22']
    
            },
            methods:{
                action1:function () {
                    alert(this.msgs[0])
                },
                action2:function () {
                     alert(this.msgs[1])
                },
                liAction:function (num,msg) {
                    console.log(num,msg)
                    
                },
                func1:function (ev) {
                    console.log(ev)
                    
                },
                 func2:function (ev,msg) {
                    console.log(ev);
                    console.log(msg)
    
                }
            }
        })
    </script>

    属性指令

    什么是属性:id,class,style等都是属性,用vue绑定属性,将属性内容交给vue处理
    语法:v-bind:属性名="变量" v-bind:可以简写为:

    一个类名可以控制一群样式,双类名中,变量拿引号括起来就不是变量了

    <body>
    <div id="app">
        <p class="" style="" v-bind:owne="oo" :jason="jj"></p>
        <!--class属性-->
        <p :class="c1" @click="action1"></p>
        <!--双类名,变量拿引号括起来就不是变量了-->
        <p :class="[c1,'br']"></p>
    
        <!--style属性-->
        <!--一个变量:该变量值为{},{}内部完成一个个属性的设置 推荐这种-->
        <p class="gDiv" :style="s1">12345</p>
        <!--一个{},{}内一个个属性由一个个变量单独控制-->
        <p class="gDiv" :style="{fontSize:fs,color:c}">123456</p>
    
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                oo:'Owen',
                jj:'Jason',
                c1:'rDiv',
                c2:'br',
                s1:{
                    // 'font_size':'50px'
                    fontSize:'30px',
                    color:'pink'
                },
                fs:'50px',
                c:'red'
            },
            methods:{
                action1:function () {
                    if (this.c1 == 'rDiv'){
                        this.c1 = 'gDiv'
                    }else{
                        this.c1 = 'rDiv'
                    }
                    
                }
            }
        })
    </script>

    表单指令

    定义两个input标签同时输入值修改值删除值,实时改变

    表单指令:v-model="变量"  双向绑定

    <body>
    <div id="app">
        <!--表单指令 v-model="变量"-->
        <form action="">
            <p>
                <input type="text" v-model="val" name="user">
            </p>
            <p>
                <input type="text"  v-model="val">
            </p>
    
            <!--单选框 v-model绑定的变量是单选框中某一个input的value-->
            <p>
                男:<input v-model="r_val"  value="male" type="radio" name="sex">
                女:<input v-model="r_val" value="female" type="radio" name="sex">
            </p>
    
            <!--复选框 v-model绑定的变量是一个列表中存放0到任意一个复选框的value -->
            <p>
                男:<input v-model="c_val"  value="m" type="checkbox" name="f">
                女:<input v-model="c_val" value="f" type="checkbox" name="f">
            </p>
    
            <button type="submit">提交</button>
        </form>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                val:'',
                r_val: 'male',
                c_val:['f']
            }
        })
    </script>

    条件指令

    条件指令:v-show 或 v-if
    v-show 消失是以display:none 显渲染,占页面结构

    v-if 是不被渲染,在内存中,所以建议建立缓存用key属性

    <body>
    <div id="app">
        <!--条件指令 v-show 或者 v_if  -->
        <div class="div"  v-show="s1"></div>
        <div  class="div"  v-show="s1"></div>
        <div  class="div"  v-if="s2" key="div1"></div>
        <div  class="div"  v-if="s2" key="div2"></div>
    </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                s1:false
            }
        })
    </script>

    点击颜色选项变换颜色,下面可以是个大页面

    <meta charset="utf-8">
    <style>
        ul li {
            border: 1px solid black;
            width: 60px;
            float: left;
        }
        ul {
            list-style: none;
        }
        ul:after {
            content: "";
            display: block;
            clear: both;
        }
        .wrap {
            width: 500px;
            height: 200px;
        }
        .red { background-color: red; }
        .blue { background-color: blue; }
        .green { background-color: green; }
    </style>
    <div id="app">
        <!-- v-if v-else-if v-else 案例 -->
        <ul>
            <li @click="changeWrap(0)">red</li>
            <li @click="changeWrap(1)">green</li>
            <li @click="changeWrap(2)">blue</li>
        </ul>
        <!-- red页面逻辑结构 -->
        <div class="wrap red" v-if="tag == 0" key="aaa"></div>
        <!-- green页面逻辑结构 -->
        <div class="wrap green" v-else-if="tag == 1" key="bbb"></div>
        <!-- blue页面逻辑结构 -->
        <div class="wrap blue" v-else key="ccc"></div>
        <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
        <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                tag: 0,
            },
            methods: {
                changeWrap (num) {
                    this.tag = num;
                }
            }
        })
    </script>
  • 相关阅读:
    Get-CrmSetting返回Unable to connect to the remote server的解决办法
    Dynamics 365中的常用Associate和Disassociate消息汇总
    Dynamics 365 Customer Engagement V9 活动源功能报错的解决方法
    Dynamics Customer Engagement V9版本配置面向Internet的部署时候下一步按钮不可点击的解决办法
    Dynamics 365检查工作流、SDK插件步骤是否选中运行成功后自动删除系统作业记录
    注意,更改团队所属业务部门用Update消息无效!
    Dynamics 365的审核日志分区删除超时报错怎么办?
    Dynamics 365使用Execute Multiple Request删除系统作业实体记录
    Dynamics 365的系统作业实体记录增长太快怎么回事?
    Dynamics CRM日期字段查询使用时分秒的方法
  • 原文地址:https://www.cnblogs.com/zhengyuli/p/11093819.html
Copyright © 2011-2022 走看看