Vue的用法

2021-10-04 04:31:59

一、介绍

1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue.js这两年火得非常快，无论是前端工程师，还是web全栈工程师，甚至是Java工程师都非常有必要学习这个框架。
2、Vue.js中的两个核心点

响应的数据绑定。
组合的视图组件，UI页面映射为组件树，划分组件可维护。

二、数据绑定

new一个Vue对象，构造方法的参数是一个对象，参数对象有多个属性，以后将分别介绍，现在只介绍以下个；

1、el：用于绑定元素，他的值是一个字符串，是css选择器，用于筛选出绑定的元素。

2、data：是个数据对象，和元素绑定的数据。

3、methods：存放事件的对象，元素中要绑定什么事件就是在这里面找的，声明的每个方法都用“,”隔开。

methods:{  //事件
    clickHandle(){
        alert('click');
    },
    clickHandle2:function(){
        alert(1)
    }
}

实例：

<body>
    <!--模板-->
    <div id="demo">
        <span v-on:click="clickHandle">{{ message }}</span>
        </div>
    </div>
    <script>
        //数据 
        let obj={
            message:'hello,Vue'
        }
        // VM 实例
        var vm=new Vue({
            el:'#demo',//挂载元素 字符串 选择器
            data:obj,// 对象
            methods:{  //事件
//                  clickHandle(){
//                      alert('click');
//                  }
                    clickHandle:function(){
                        alert(1)
                    }
                }
        })
    </script>
</body>

补充：双大括号有简单的运算功能；例如{{true ?"yes":"no"}} 显示yes，{{1+2}} 显示3。但是双大括号不能解析标签，括号里面是什么字符就显示什么字符。

指令

1、v-model：双向数据绑定。

双向数据绑定：只要绑定的数据在HTML和JavaScript中的其中一端改变数据，那么另一端的对应的数据也相应的改变。

<body>
    <div id="demo">
        <input type="text" v-model="message" />
        <p>{{message}}</p>
    </div>
    <script>
        //数据 
        let obj={
            message:'hello,123'
        }
        // VM 实例
        var vm=new Vue({
            el:'#demo',//挂载元素 字符串 选择器
            data:obj// 渲染数据  对象

        })
    </script>
</body>

在input输入框里面输入什么，马上在下面的span显示出来。

2、v-on：绑定事件

v-on可以缩写为@ 方法参数为event；
可以在事件方法后面添加修饰符，修饰符的作用如下：

stop - 调用 event.stopPropagation()。
prevent - 调用 event.preventDefault()。
capture - 添加事件侦听器时使用 capture 模式。
self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
native - 监听组件根元素的原生事件。
once - 只触发一次回调。
left - (2.2.0) 只当点击鼠标左键时触发。
right - (2.2.0) 只当点击鼠标右键时触发。
middle - (2.2.0) 只当点击鼠标中键时触发。
passive - (2.3.0) 以 { passive: true } 模式添加侦听器。

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

实例：

<body>
    <div id="demo">
        <span v-on:click.once="clickHandle">{{ message }}</span>
    </div>
    <script>
        //数据 
        let obj={
            message:'hello,Vue'
        }
        var vm=new Vue({
            el:'#demo',//挂载元素 字符串 选择器
            data:obj,// 渲染数据  对象

            methods:{  //事件
                clickHandle:function(){
                    alert(1)
                }
            }
        })
    </script>
</body>

3、v-html：更新元素的 innerHTML 。

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

<body>
    <div id="demo">
        {{true ?"yes":"no"}}
        <div v-html="html"></div>

    </div>
    <script>
        let obj={
            html:"<div>hello,Vue</div>",/*{{}} 能进行一些简单的运算，不会解析标签*/
            abc:1
        }
        // VM 实例
        var vm=new Vue({
            el:'#demo',//挂载元素 字符串 选择器

            data:obj// 渲染数据  对象

        })
    </script>
</body>

页面显示：

yes
hello,Vue

4、v-bind：动态地绑定一个或多个特性。可以缩写为`:` 。

v-bind绑定的属性可以是原生的属性，也可以是自定义的。
绑定的属性值用"" 包起来，可以是绑定数据里面的某个属性名，实际值是绑定数据属性对应的值。

<body>
    <div id="demo">
        <span :cutomId="id"><!-- :相当于v-bind；cutomId是一个自定义属性，id是用变量的形式存储属性值，其值会是obj数据里的id属性的值 -->
            {{message}}
        </span>
    </div>
    <script>
        //数据 
        let obj={
            message:'hello,123',
            id:'456'
        }
        // VM 实例
        var vm=new Vue({
            el:'#demo',//挂载元素 字符串 选择器
            data:obj// 渲染数据  对象
        })
    </script>
</body>

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>
<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

5、template是一个字符串类型，作为 Vue 实例的标识使用。会把绑定的元素的内容替换成该字符串，并且有解析字符串里面的标签。

<body>
    <div id="demo">
        {{true ?"yes":"no"}}
        <span>yuanshuo</span>
    </div>
    <script>
        let obj={
            html:"<div>hello,Vue</div>",
            abc:2
        }
        var str=`<div>hello,{{abc}},
                <span>yuanshuo</span>

        </div>`
        // VM 实例
        var vm=new Vue({
            el:'#demo',//挂载元素 字符串 选择器
            data:obj,// 渲染数据  对象
            template:str//原来的结构会失效？
        })
    </script>
</body>

页面显示：

hello,2, yuanshuo

可知绑定元素原来的结构已经失效了，替换成template字符串里的内容。

6、template：Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。

<div id="demo"></div>
<script>
    let obj={
        html:"<div>hello,Vue</div>",
        abc:2
    }
    // VM 实例
    var vm=new Vue({
        el:'#demo',//挂载元素 字符串 选择器
        data:obj,// 渲染数据  对象
        render(createElement){
            return createElement(
                "ul",
                    {
                        class:{
                            bg:true
                        },
                        style:{
                            fontSize:"20px"
                        }

                    },
                [
                    createElement("li",1),
                    createElement("li",2),
                    createElement("li",3)
                ]

            );
        }

    })
</script>

7、v-show：根据表达式之真假值，切换元素的 display CSS 属性。

8、自定义指令directives

directives和data、el等一样，是Vue对象下的一个属性，创建Vue对象时位置如下：

var vm = new Vue({
    el:".main",
    data:{},
    directives:{
        "focus":{
            update(el,binding){
                if(binding.value){
                    el.focus();
                }
            }
        }
    }
})

html代码：

<input v-focus="edtorTodos===item" class="edit" type="text"  v-model="item.title" />

当条件“edtorTodos===item”为true时就会执行update函数。

三、其他

1、本地存储数据

当我们需要刷新之后本页面的数据不丢失或者跳转页面需要传递数据的时候就需要把数据保存在本地。
如下写了一个存取本地数据的例子：

// 存取localStorage 中的数据
var store={
    save(key,value){ //存储数据
        localStorage.setItem(key,JSON.stringify(value))
    },
    fetch(key){ //获取数据
        return  JSON.parse(localStorage.getItem(key)) || []
    }
}

保存数据：

store.save("yuandao-new-class",this.list)

取出数据：

var list=store.fetch("yuandao-new-class");

码农公寓