vue基础用法

 

vue.js是什么

vue.js也称为vue,读音/vju/

• 是一个构建用户界面的框架
• 是一个轻量级MVVM(Model-view-viewModel)框架，和angular，react类似，其实就是所谓的数据双向绑定
• 数据驱动+组件化的前端开发(核心思想)
• 通过简单的API实现响应式的数据绑定和组合的视图组件

为什么要使用VUE？

Vue. js 一直以轻量级，易上手被开发者称道。

使用Vue，使我们无须再像使用Angular.js 和 React.js时那样关心DOM的操作。

vue的指令以v-xxx开头
vue2.0和1.0相比，最大的变化是引入了Virtual DOM(虚拟DOM),页面更新效率更高，速度更快。

先瞅一瞅vue实例

                var vm=new Vue({    //创建一个vue的实例传入json
                    el:'#box',//指定关联的选择器
                    data:{//对象存储数据
                        sjd:'holle world',
                        name:'tom'
                    }
                });

         <div id="box">
             {{sjd}}<!-- 两队大括号称为模板 -->
         </div>

双向数据绑定

v-model 一般用于表单元素

            用户名:<input type="text" v-model="name" />
            <br>
            <p>我叫{{name}}</p>

vue data中的name为空：且表单输入什么 p标签显示什么

 常用的指令

v-for 对数组进行循环

                new Vue({
                    el:'#angs',
                    data:{
                        arr:[1,21,14,45,54],
                        user:{id:12345,name:'秋香',age:25}
                    }
                })

<li v-for="value in arr">{{value}}</li><!-- 循环数组 -->

 循环user数组

<li v-for="value in user">{{value}}</li><!-- 只是循环了值，对象的索引key没有

 键值循环

<li v-for="(v,k) in user">{{k}}={{v}}</li>

 循环包含重复数据的集合 可以通过指定:key属性绑定唯一key,当更新元素可以重用元素，提高效率。

arr2:[12,21,14,45,54,12]

<li v-for="(v,k) in arr2" :key='k'>{{v}}</li>

 循环对象数组。

                        users:[//对象数组
                            {id:1111,name:'唐伯虎',age:25},
                            {id:2222,name:'老鳖',age:22},
                            {id:3333,name:'奥力给',age:23}
                        ]

<li v-for="user in users">{{user.id}},{{user.name}},{{user.age}}</li><!-- 循环对象数组 -->

如果想要索引

<!-- user加上一个索引，index从0开始 -->
<li v-for="(user,index) in users">{{index+1}},{{user.id}},{{user.name}},{{user.age}}</li>

v-on:事件名称

用来绑定事件的用法 可以用@代表来简写

例如：

点击按钮时向数组中添加一个元素

                new Vue({
                    el:'#itany',
                    data:{    //存储数据
                        arr:[12,21,215,46],
                    },
                    methods:{ //存储方法
                        add(){
                            // arr.push(666);默认不能直接访问
                            this.arr.push(666);//使用this访问当前实例中的成员
                            this.fname();
                        }
                    }
                })

<button type="button" v-on:click="add()">向数组中添加一个元素</button>

v-show/v-if

用来显示或者隐藏元素，v-show是通过display实现,v-if是每次删除后再重新创建

例如：

点击按钮隐藏div

                    methods:{
                        change(){
                            this.flag=!this.flag;
                        }
                    }

             <button type="button" v-on:click="change()">隐藏div</button>
             <hr >
             
             <div class="" style=" 100px; height: 100px; background-color: red;" v-show="flag">
             </div>

v-show是通过display设置none属性实现隐藏

             <button type="button" v-on:click="change()">隐藏div</button>
             <hr >
            <div class="" style=" 100px; height: 100px; background-color: red;" v-if="flag">
            </div>

v-if是每次删除代码后再重新创建

在 <template> 元素上使用 v-if 条件渲染分组

 v-if 是一个指令，所以必须将它添加到一个元素上。

此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。

最终的渲染结果将不包含 <template> 元素。

<div id="app">
----
<template v-if="ok">
  <h1>标题</h1>
  <p>段落 1</p>
  <p>段落 2</p>
</template>
----
</div>
<script>
var vm = new Vue({
    el:'#app',
    data:{
        ok: 1
    }
});
</script>

事件的简写

v-on:click点击事件可简写为@click

事件对象$event

包含事件相关信息，如事件源，事件类型，偏移量

事件冒泡 （往上传播）

阻止事件冒泡使用 .stop

阻止事件默认行为并执行指定函数.prevent

原生js方式，依赖于事件对象

事件修饰符 只触发一次 .once

关于键盘事件

简写 不需要事件对象 按键别名或按键的值

@keydown.ctrl或@keydown.13

属性

属性的绑定和简写
v-bind:属性=''简写:属性

例如：

    data:{
        url:'www.360.com'
    }

<a :href="url">360首页</a>

v-bind可以直接访问vue中的数据，不需要使用{{}}

例如：

                let vm = new Vue({
                    el:'#box1',
                    data:{
                        src1:'//atts.w3cschool.cn/attachments/cover/cover_erlang.png?imageView2/1/w/64/h/64&t=1542019173',
                        w:'200px',//宽度
                        h:'100px',//高度
                    },
                    methods:{
                        
                    }
                });

src1为链接

<img :src="src1" :width="w" :height="h"><!-- 简写直接加上: -->

class和style属性

        <style type="text/css">
            .aa{
                background: #0062CC;/* 背景色 */
            }
            .bb{
                color: red;/* 字体颜色 */
                font-size: 20px;/* 字体大小 */
            }
            .vv{
                font-family: "宋体";/* 字体样式 */
                text-align: center;/* 居中 */
            }
        </style>

绑定单个样式 若要用多个样式，则用数组形式

<p :class="cc">我的世界</p>

数组形式绑定多个样式

在vue的data中给样式赋值别名

                let vm = new Vue({
                    el:'#box1',
                    data:{
                        w:'200px',//宽度
                        h:'100px',//高度
                        cc:'aa',
                        dd:'bb',
                        ss:'vv',
                    },
                    methods:{
                        
                    }
                });

<p :class="[cc,dd,ss]">我的世界</p>

json形式绑定

                    data:{
                        flag:true,
                        num:-1,
                    }

             <p :class="{aa:true,bb:flag}">我的世界</p>
             <p :class="{aa:num>0}">我的世界</p><!-- 大于零为true -->

变量引用json

                    data:{
                        holle:{aa:true,bb:true,vv:true}
                    }

<p :class="holle">引用变量json</p>

 模板语法

文本

数据绑定最常见的形式就是使用“Mustache”语法 {{}}(双大括号) 的文本插值

v-once 指令

能执行一次性地插值，当数据改变时，插值处的内容不会更新。

例如点击按钮更改文本内容

    data:{
        msg:'打打怪',
        
    },
    methods:{
        textH1(){
            this.msg = '灰太狼';
        }
    }

        <div id="app">
            <h1 >{{msg}}</h1>
            <h1 v-once>{{msg}}</h1>//once值绑定一次不会改变
            <button type="button" @click="hyyj()">点击</button>
        </div>

绑定了v-once指令的值未改变

原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用v-html指令

    data:{
        rawHtml: '<span style="color:blue">这里要显示蓝色</span>'
    },

            <h2 >{{rawHtml}}</h2>
            <h2 v-html="rawHtml"></h2>

结果：

 v-bind

渲染一个动态的id这种情况应该使用 v-bind 指令, {{ }} (双括号)不能作用在 HTML 特性上。

 使用JavaScript表达式

对于所有的数据绑定，都可以完全使用JavaScript表达式。

例如：

{{ number + 1 }}   <!-- 计算 -->
{{ ok ? 'YES' : 'NO' }}   <!-- 单表达式选择 -->
{{ message.split('').reverse().join('') }}  <!-- 单表达式运算 -->
<div v-bind:id="'list-' + id"></div>  <!-- 字符串拼接 -->

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。

再例如：

<span v-bind:class="status == 'fail' ? 'off': 'on'">状态</span><!-- 当status 等于fail得时候 class样式为off 否则为on -->

    data:{
        status:'fail'
    }

 动态参数

从 Vue 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

例如：

    data:{
        ename: 'click'
    }

<a v-bind:[ename]="alert"> ... </a>//属性表示点击事件
需要注意的是动态参数需要避免使用大写字符来命名而且在动态参数表达式里无法使用空格和引号，放在HTML属性名里是无效的