前端包浆记

VUE.js学习笔记--vue的使用

2019-02-14  本文已影响0人  水云楼

什么是vue.js

官方说明：是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue.js的特性

安装vue.js

官网：https://cn.vuejs.org/v2/guide/installation.html

点击下载
点击开发版本将代码拷贝出来，放入新建的js文件中，就可以在自己的页面使用script标签引入啦

使用vue.js

Vue.js提供了一个vue对象，要使用vue.js 需要把它new出来
<script>new Vue({el:’#xxxx’,data:{}})</script>
el的作用是声明vue对象的作用边界，绑定上面dom标签的id
data的作用是存放显示在页面中的数据，在标签中以{{}}来获取。
我们知道vue是一个mvvm框架，前端的html页面相当于view，data对应的是后端的model，而我们new出来的vue对象则代表桥接前后端的view-model。也是整个mvvm框架的核心！

绑定文本data

下面是一个简单的hello world小栗子


举个栗子

运行页面显示hello world


绑定元素特性

不光可以绑定文本值，还可以对一些元素特性进行绑定 如：

<div id="app2" v-bind:title='message'>
        <span>鼠标悬停触发</span>
</div>

Js文件：

let app2 = new Vue({
    el:'#app2',
    data:{
        message:'hi~~ 平田君~~'
    }
})

展示效果，是不是很方便啦

hi,又见面了平田君~~
这里的v-bind 特性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
当然这个指令可以简写为“：”即v-bind:title等效于:title

绑定函数

例如：

    <div id="root">
        <div v-on:click="handleClick" ><h1>{{content}}</h1></div>
    </div>

Js：

let root = new Vue({
    el : "#root",
    data:{
        content : "hello"
    },
    methods: {
        handleClick: function(){
            if(this.content === 'hello')
            this.content = "world"
            else
            this.content = "hello"
        }
    }
})

这段代码通过v-on将鼠标点击事件click与vue函数handleclick绑定到一起，当发生鼠标点击事件的时候执行handleclick函数，将在hello 和 world之间来回切换
同样的v-on:click也可以简写为@click

双向绑定

<div id='shuru'>
       <input :value="content"/>
       <div>{{content}}</div>
   </div>

单项属性绑定value的时候 输入东西content不发生变化


    <div id='shuru'>
        <input v-model="content"/>
        <div>{{content}}</div>
    </div>

使用v-model 可以实现双向绑定，效果如下，当输入框中数据发生变化的时候vue对象中data里的content属性也会跟着发生相应的变化。


计算属性

<div id='ex'>
    <input v-model='one'/> +
    <input v-model='two'/> =
    {{sum}}
</div>

Js代码：

let ex = new Vue({
    el:"#ex",
    data:{
        one : "",
        two : "",
    },
    computed:{
        sum : function(){
           return Number(this.one) + Number(this.two)
        }
    }
})

通过computed将sum绑定到div，可以实现函数运算返回

侦听器

watch:{
    sum : function(){
        this.count++
    }
}

使用watch可以对元素进行侦听，上面例子是对sum进行监听，当sum值发生变化的时候count进行自增，用来统计计算sum的次数

因为是即时计算，输入了5次也就说明计算了5次

条件与循环指令

控制一个元素的显示与否也是很简单的 我们可以使用v-if和v-show来做
我们变个戏法

<div id='root'>
    <div v-if="show">{{count}}</div>
    <button @click="oneTick">{{fashu}}</button>
</div>

Js代码：

let ex = new Vue({
    el:"#root",
    data:{
        count:"戏法---->",
        show:true,
        fashu:"雾隐雷藏"
    },
    methods:{
        oneTick:function(){
            this.show = !this.show;
            if(this.fashu==="雾隐雷藏")
                this.fashu = "明心见性";
            else if(this.fashu==="明心见性")
                this.fashu = "雾隐雷藏";           
        }
    } 
})

消失了
效果可见我们给button绑定了一个点击事件，当触发事件的时候修改了上面div的show的值，当show为true的时候戏法----> 是显示状态当为false的时候就消失了，
同样的我们可以把v-if变为v-show 得到的效果是一样的
但是区别肯定会有的，让我们荡起双桨（啊呸。。。）打开控制台

当时v-if的时候我们可以发现施展雾隐雷藏的时候会吧div删除掉，然后明心见性的时候再创建一个
而当v-show的时候则是增加一条css属性display:none，显示的时候再去掉。
至于开发中我们如何选择就看业务需求啦~~
循环指令是用v-for来实现的： 
<div id="root1">
        <ul>
            <li v-for="tool of tools">{{tool}}</li>
        </ul>
  </div>

Js代码：

let ab = new Vue({
    el:"#root1",
    data:{
    tools:["A","B","C"]
}
展示效果
<li>标签中也可以写为v-for="tool in tools"
另外在使用v-for的时候可以增加一个key的属性，可以提升页面的渲染速度，一个循环里的key是不可以重复的。
<li v-for="tool of tools" :key='tool'>{{tool}}</li>
考虑到tool有可能是重复的，也可以用下面的方法
<li v-for="(tool ,index) of tools" :key='index'>{{tool}}</li>
效果相同

总结

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

上一篇 下一篇

猜你喜欢

热点阅读