VUE——1

最新推荐文章于 2024-03-06 05:54:26 发布

原创最新推荐文章于 2024-03-06 05:54:26 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

Vue：

是一套用于构建用户界面的渐进式框架. 非常灵活，渐进式意思就是可以只使用VUE的一小部分功能，可以和JQuery结合.也可以使用全部功能.
声明式渲染——组件系统——客户端路由——集中式状态管理——项目构建
vue 的核心库只关注视图层

Vue的基本使用步骤

提供标签填充数据
引入vue.js库文件
用vue语法做功能（new Vue创建一个Vue实例）（）
把vue提供的数据填充到标签里面

        < div id="app">
            < div>{{msg}}< /div>         
        < /div>
        < script src="js/vue.js">< /script>
        < script>
            var vm = new Vue({              //给个变量存储VUE的实例   参数是对象
                el:'#app',                  //填充的位置     实例参数el:元素的挂载位置
                data:{                      //填充的数据     data：模型数据                           
                    msg:'Hello caption'
                }
            })
        < /script>

编译过程 vue代码——vue框架——原生js代码

VUE模板语法

插值表达式：插值表达式将数据填充到html标签还可以基本的计算操作 <div>{{msg}}</div>
指令
事件绑定
属性绑定
样式绑定
分支循环结构

托管不能托管在body上，必须托管在body下面直接的子盒子

指令

本质就是自定义属性
Vue中指定都是以 v- 开头

v-cloak指令

插值表达式存在闪烁问题. 为什么会有闪烁问题：代码加载的时候先加载HTML 把插值语法当做HTML内容加载到页面上当加载完js后才把插值语法替换掉所以我们会看到闪烁问题
v-cloak防止页面加载时出现闪烁问题原理:先通过样式隐藏内容，再内存中进行值的替换，替换好值之后再显示最终的值.
用法：先提供样式，在style里写.

  [v-cloak]{
            dispaly：none；
  }

再插值表达式所在的标签添加v-cloak指令. < div v-cloak>{{msg}}< /div>

v-text

v-text指令填充纯文本，用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签原样一并输出出的字符串

<div v-text="msg"></div>

v-html

识别HTML标签
存在安全问题，网站内部数据可以用，第三方数据不可以用.

<div v-html="msg"></div>

v-pre

显示原始信息，跳过编译过程.

<div v-pre> {{msg}} </div>

v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
显示的信息后续不需要再修改，可以使用v-once，这样可以提高性能，因为一直在监听.

    <span v-once>{{ msg}}</span>

双向数据绑定

当数据发生变化的时候，页面中的绑定的标签视图也就发生变化

当视图发生变化的时候，模型数据也会跟着同步变化

v-model指令：

v-model是一个双向数据绑定指令，限制在 < input>、< select>、< textarea>、components中使用

<div id="app">
          <div>{{msg}}</div>
          <div>
              当输入框中内容改变的时候，  页面上的msg  会自动更新
            <input type="text" v-model='msg'>
          </div>
      </div>

mvvm：

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
m model
数据层 Vue 中数据层都放在 data 里面
v view 视图
Vue 中 view 即我们的HTML页面
vm （view-model）控制器将数据和视图层建立联系
vm 即 Vue 的实例就是 vm
M代表数据层，V代表视图层，VM数据层数据发生改变通过数据绑定的方式让视图层也发生改变.

事件绑定

v-on指令：

指令用法：< input type=‘button’ v-on:click=‘num++’/>
简写方式：< input type=‘button’ @click=‘num++’/>

事件函数的调用方式：

直接绑定函数名称：< button v-on:click=‘say’>点击< /button>
调用函数：< button v-on:click=‘say（）’>点击< /button>

var vm = new Vue({
	el:'#app ',
	data:{
		num:0
	},
	methods:{          //methods专门定义方法的一个属性
		handle:function(){          
		this:num++;   //this访问的是vm,也就是vue的实例对象
		}
	}
	
})

事件函数参数传递：

如果要传递具体的参数只能用：

< button v-on:click='say("hi",$event)'> say< /button>

$event代表的是事件对象，固定写法.

如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
            <button v-on:click='handle1'>点击1</button>
            <!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
                 并且事件对象的名称必须是$event 
            -->
            <button v-on:click='handle2(123, 456, $event)'>点击2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++;
                }
            }
        });
    </script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()处理阻止默认行为和阻止冒泡事件
在vue里

.stop阻止冒泡 < a v-on:click.stop=“handle”>跳转< /a>
.prevent阻止默认行为 < a @click:prevent=“handle”>跳转< /a>

按键修饰符

-- -当点击enter 时调用 vm.submit() 
<input v-on:keyup.enter="submit">

自定义修饰符

自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode的值
Vue.config.keyCodes.自定义 = num
可以console.log(event.keyCode)打印出来按键的数值

<div id="app">
    预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法
    <input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
	
    Vue.config.keyCodes.f5 = 116;

    let app = new Vue({
        el: '#app',
        methods: {
            prompt: function() {
                alert('我是 F5！');
            }
        }
    });
</script>

属性绑定

v-bind指令:
动态处理属性命令
用法：< a v-bind:href ='url' >< /a> <img v-bind:src="imageSrc">
v-bind：
简写：< a :href ='url' >< /a>

v-model原理

< input type = "text" v-model = "msg">
< input type = "text" v-bind:value = "msg" v-on:input = "msg=$event.target.value">

v-model是个语法糖，首先通过属性绑定（v:bind）的方式，：value=" "，然后通过v-on：input时间动态的获取输入框内的值，修改data内的数据，一旦data内数据发生改变，通过属性绑定的值也会发生改变.

样式绑定

class样式处理：

对象：<div v-bind:class=" {active:isActive,error:isError} "> </div>
对象的方式里包括键值对，左边是类名，右边是控制类名是否显示的属性以is为开头

<body>
    <div id="app">
        <div :class="{active:isActive,error:isError}">
            马刺加油
        </div>
        <!-- <div :class="[activeClass,errorClass]">
            测试样子
        </div> -->
        <button @click="handle">换</button>
    </div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            isActive:true,
            isError:true
        },
        methods: {
            handle:function(){
                this.isActive = !this.isActive;   //这种取反方式要经常用到.  控制isActive的值在true和false之间切换
                this.isError = !this.isError;
            }
        }
    });
</script>
</body>