Vue.js基础知识

2018-11-18  本文已影响0人  nzdnllm

1.安装-使用<script>引入
操作步骤:
(1)进入vue.js官网:https://cn.vuejs.org/v2/guide/installation.html
(2)点击开发版本

(3)拷贝开发版本页面的vue.js源代码
(4)创建项目目录文件夹VUE
(5)VUE目录下新建vue.js文件,将开发版本中的源代码放入vue.js文件内
(6)VUE目录下新建index.html文件,将vue.js通过<script>标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="vue.js"></script>
</head>
<body></body>
</html>

注意:引入需要放在head中引入,避免放在body内会发生抖屏的现象
2.创建一个Vue实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue入门</title>
        <script src="vue.js"></script>
  </head>
  <body>
      <div id="root">{{msg}}</div>
      <script>
        new Vue({
            el: "#root",//element 元素,挂载点,绑定dom节点:表示Vue的示例接管页面上的哪个元素,此时vue实例与id=root的dom进行了绑定 #的含义是id=
            data: { //存储数据,用于替换标签中的占位符,vue.js是通过数据操纵标签的
              msg:"Hello World"
            }
        })
    </script>
  </body>
</html>

3.挂载点,模板与实例的关系
(1)挂载点:vue的el属性id对应的dom标签
vue只会处理挂载点下面的内容
(2)模板:挂载点内部的内容都叫做模板
模板的两种写法:

<div id="root">
    <h1>{{msg}}</h1>  //1.直接写在挂载点的内部(建议)
</div>
<script>
    new Vue({
        el: "#root",
        data: { 
            msg:"Hello World"
        }
    })
</script>

<div id="root"></div>
<script>
    new Vue({
        el: "#root",
        template: '<h1>{{msg}}</h1>', //2.写在vue实例内部,template属性表示模板,只会显示在挂载点内部
        data: {
            msg:"Hello World"
        }
    })
</script>

上述两种方式显示结果一致,如下:


模板显示

(3)实例:将挂载点、模板、数据等属性写入实例,vue会自动结合模板和数据生成最终要展示的内容,然后将最终生成的内容放入挂在点之中
4.实例中的数据,事件与方法
(1)v-text指令,当前标签显示的内容,用户v-html同样可以实现

 <div id="root">
    <h1 v-text="number"></h1> //v-text此处可以替换成v-html,展示效果相同
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg:"Hello World",
            number:123
        }
    })
</script>

(2)v-text与v-html的区别
当上述例子中的number变为html标签时,使用v-text会将标签进行转义,将标签显示在页面中,而使用v-html将不会对标签进行转义,标签将不会显示在页面中

//使用v-text
<div id="root">
    <div v-text="content"></div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            content:'<h1>Hello World</h1>>'
        }
    })
</script>
v-text页面展示
//使用v-html
<div id="root">
    <div v-html="content"></div>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            content:'<h1>Hello World</h1>'
        }
    })
</script>
v-html页面展示

(3)v-on,绑定事件的指令

//事件名称:click
//事件绑定的方法:handleClick
//方法写入实例的methods中
<div id="root">
    <div @click="handleClick">{{content}}</div>    //@为v-on:的简写
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            content:'Hello World'
        },
        methods:{
            handleClick:function () {
                this.content='world' //this表示当前实例下的data中的元素
            }
        }
    })
</script>

5.属性绑定和双向数据绑定
(1)v-bind:单向绑定指令,表示绑定属性 title表示被绑定的属性,=后面的数据表示实例中的属性,也可以是js表达式
单向绑定:数据决定页面显示内容,页面无法决定数据的内容

<div id="root">
    <div :title="title">hello world</div> //v-bind 缩写为:
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            title: 'this is hello world'
        }
    })
</script>
单向绑定示例

(2)v-model:双向绑定指令

<div id="root">
    <div :title="title">hello world</div> //v-bind 缩写为:,v-bind表示绑定属性 title表示被绑定的属性,=后面的数据表示实例中的属性,也可以是js表达式
    <input v-model="content"/> //使用v-model绑定后当变量content的进行变化是input的值也进行变化,当input输入框中的值进行变化时 content的值也会进行变化
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el: '#root',
        data: {
            title: 'this is hello world',
            content: 'this is content'
        }
    })
</script>

6.Vue中的计算属性和侦听器
(1)computed:vue实例的计算属性,conmputed指的是一个属性通过其它属性计算而来
优点:在如下例子中,当firstName和lastName中的值都未发生变化,此时computed不会重新计算fullName的值,会使用上次的缓存(内置缓存),只有当firstName和lastName中的任意值发生变化时才会重新计算fullName的值,性能较高

<div id="root">
    姓:<input v-model="firstName"/>
    名:<input v-model="lastName"/>
    <div>{{fullName}}</div>
</div>
<script>
    new Vue({
        el: '#root',
        data:{
            firstName:'',
            lastName: ''
        },
        computed:{
            fullName:function () {
                return this.firstName + ' ' + this.lastName
            }
        }
    })
</script>

(2)watch:侦听器,用于监听某一个数据的变化,当数据发生变化时,我们就可以在侦听器中编写我们所需要的业务逻辑

<div id="root">
    姓:<input v-model="firstName"/>
    名:<input v-model="lastName"/>
    <div>{{fullName}}</div>
    <div>{{count}}</div>
</div>
<script>
    new Vue({
        el: '#root',
        data:{
            firstName:'',
            lastName: '',
            count: 0
        },
        computed:{
            fullName:function () {
                return this.firstName + ' ' + this.lastName
            }
        },
        watch:{
            fullName: function () { //当firstName和lastName中任意一个数据发生变化,计数变量都会增加1
                this.count++
            }
        }
    })
</script>

7.常见指令
(1)v-if:条件指令

<div id="root">
    <div v-if="show">hello world</div> //只有当v-if的值为ture时,此标签的内容才会显示
    <button @click="handleClick">toggle</button>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

(2)v-show

<div id="root">
    <div v-show="show">hello world</div> //只有当v-show的值为ture时,此标签的内容才会显示
    <button @click="handleClick">toggle</button>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            show:true
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>

(3)v-if和v-show的区别
v-if是在dom中中介把当前标签删除;而v-show是把当前标签的style属性中的display设置为none,把当前标签进行隐藏;
如果频繁的需要把当前标签的隐藏的频率高时,使用v-show会减少添加dom和小会dom的操作,性能较好
(3)v-for ,用户数据的循环展示

<div id="root">
    <div v-show="show">hello world</div>
    <button @click="handleClick">toggle</button>
    <ul>
        <li v-for="(item,index) in list" :key="item">{{item}}</li>
        <!--item 代表list中的每一条数据-->
        <!--使用v-for时需要搭配 key属性,他会提升页面渲染的效率-->
        <!--注意:key要求不能相同,index代表list每一项的下标,key设置为index每次都会不同-->
    </ul>
</div>
<script>
    new Vue({
        el:'#root',
        data:{
            show:true,
            list:[1,2,3]
        },
        methods:{
            handleClick:function () {
                this.show=!this.show
            }
        }
    })
</script>
上一篇下一篇

猜你喜欢

热点阅读