Vue框架

作者: Louis_Duan | 来源:发表于2019-03-13 16:41 被阅读0次

第1章 Vue基础语法

创建一个Vue实例

把vue.js放在head标签里用script标签引入,避免放在body里引起抖屏。

1552395200.jpg
引入vue.js库,用new Vue()函数创建一个实例
- el:让vue实例去接管页面上哪一个元素
- data: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",
            data:{
                msg:'hello world'
            }
        })
    </script>
</body>
</html>

挂载点,模板与实例

  • 挂载点
    挂载点就是vue里的el属性对应的dom节点。
    div标签称为vue实例的挂载点,因为el正好和div标签的id对上,vue只会处理挂载点下面的内容。
  • 模板
    挂载点内部的内容都叫模板内容。
    <div id="root">
        <h1>hello {{msg}}</h1>//模板内容
    </div>

模板除了可以放在挂载点后面写之外,还可以放在vue实例里面写:

    <script>
        new Vue({
            el:"#root",
            template:'<h1>hello {{msg}}</h1>',//模板内容
            data:{
                msg:'world'
            }
        })
    </script>

Vue实例中的数据,事件与方法

  • 插值表达式
<h1>hello {{msg}}</h1>
{{mynumber}}//插值表达式
  • v-text(会进行一次转义输出纯文本)
    语法:v-text="",双引号是划定界限的符号。
<h1 v-text="mynumber"> </h1>

h1的内容由mynumber这个变量决定,v-text是vue的一个指令
,告诉h1要显示的就是mynumber这个变量。

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

    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
            msg:"<h1>hello</h1>"
v-text显示内容
  • v-html(不会转义)
    语法:v-html="",双引号是划定界限的符号。
    <div id="root">
        <h1 v-text="msg"></h1>
    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                msg:"<h1>hello</h1>"
            }
        })
    </script>

显示内容


v-html显示的内容
  • v-on模板指令
    语法:v-on:事件名称="函数(方法)",v-on:可以简写为@,给模板上的标签绑定事件。
//点击hello,hello变成world
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <h1 v-text="content" @:click="handleClick"></h1>
        /*给标签绑定一个handleClick事件*/
    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                content:"hello"
            },
            methods:{//把函数定义在vue实例的methods属性下
                handleClick: function(){
                    this.content = 'world'
                }
            }
        })
    </script>
</body>
</html>

Vue中的属性绑定和双向数据绑定

  • v-bind:指令简写为“:”,把div标签的title属性和title数据项绑定
    语法:v-bind:属性="数据项"

    注意:""里面放的不再是字符串,而是JS表达式(里面可以放字符串也可放变量)。
<script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <div v-bind:title="mydata">hello world</div>
    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                mydata:"this is hello world",
            }
        })
    </script>
  • v-model双向数据绑定
    语法:v-model=""
    单向绑定:数据决定页面的显示,页面无法决定数据里的内容。
    双向绑定:互相决定
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <div :title="title">hello world</div>
        <input v-model="content"/>
        <div>{{content}}</div>
    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                title:"this is hello world",
                content:"this is a content"
            }
        })
    </script>
image.png

Vue中的计算属性和侦听器

  • computed计算属性

  • watch监听数据变化
    监听数据或者属性的变化

    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        姓:<input v-model="firstName">
        名:<input v-model="lastName">
        <div>{{fullName}}</div>
fullName定义在Vue实例computed属性中,是一个计算属性,通过别的属性
计算出来的 
好处是若计算该属性的属性没有改变,每一次使用该属性的时候,会使用试一
次的缓存结果
fistName和lastName没变,重新使用fullName的时候不会重新计算,而是
使用上一次的缓存结果
        <div>{{count}}</div>
    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                firstName:'',
                lastName:'',
                count:0
            },
            computed:{
                fullName:function(){
                    return this.firstName+' '+this.lastName
                }
            },
监听某一个数据的变化,一旦数据发生变化,就可以在
侦听器里执行相应的逻辑
            watch:{
                firstName:function(){
                    this.count ++
                },
                lastName:function(){
                    this.count ++
                }
            }
        })
    </script>

v-if,v-show与v-for指令

  • v-if 控制dom存在与否,一次性操作选v-if
    语法:v-if="数据"
  • v-show控制dom显示与否,多次操作选v-show
  • v-for控制一组数据,循环显示在页面上
    语法:v-for=“(item,index) of items” :key="index"
    一般 js for in 是遍历 key, 而 for of 遍历 value。在 vue 里面应该没区别
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if,v-show,v-for 指令</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
v-if控制div标签删除与否,当show为true时删除dom结构,不显示hello
        <div v-if="show">hello world</div>
        <button @click="handleClick">tonggle</button>
        <ul>
v-for循环显示出list列表里的值,:key值能更好的渲染,每次的key
值不能相同
<li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",
            data:{
                show: false,
                list:[1,2,3]
            },
            methods:{
                handleClick:function(){
                    this.show = !this.show;
                }
            }
        })
    </script>
</body>
</html>

第1章总结

Vue模板指令 语法 用处
v-text v-text=" ",双引号是划定界限的符号 把数据作为文本输出
v-html v-html=" " 不转义数据并输出
v-on v-on:事件名称="函数(方法)",v-on:可以简写为@, 给模板上的标签绑定事件
v-bind v-bind:属性="数据项",简写为“:” 进行属性绑定
v-model v-model="" 双向数据绑定
v-if v-if="数据" 控制dom存在与否,一次性操作选v-if
v-show v-show="数据" 控制dom显示与否,多次操作选v-show,
v-for v-for=“(item,index) of items” :key="index" js for in 是遍历 key, 而 for of遍历value。在 vue 里面应该没区别 控制一组数据,循环显示在页面上

Vue属性 格式 用处
el el: 指定挂载点
data data:{} 存放vue实例的数据
methods methods:{} 定义函数,它需要手动调用才能执行,而不像computed那样,可以自动执行预先定义的函
computed computed:{} 计算属性是以Vue的依赖追踪机制为基础的,其试图处理这样的一件事情:当某一个数据(依赖数据)发生变化的时候,所有依赖这个数据的相关数据会自动发生变化,也就是自动调用相关的函数去实现数据的变动
watch watch:{} 监听数据或者属性的变化

第2章、Vue中的组件

TodoList功能开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <li v-for="(item,index) of list" :key="index">
            {{item}}
            </li>
        </ul>
    </div>

    <script>
        new Vue({
            el:"#root",
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                handleSubmit: function(){
调用push方法让list中增加一个数据
                    this.list.push(this.inputValue)
                    this.inputValue=""
                }
            }
        })
    </script>
</body>
</html>
image.png

TodoList中的组件拆分

  • 组件:页面中的某一部分
  • 创建全局组件
    把<li>标签拆分成组件进行管理
  1. 通过Vue.component创建的组件叫做全局组件。在任何地方的模板里都可以使用
  2. 调用全局组件的时候可以通过属性传参,属性的名字可以随便取,不一定非得叫content,此处的属性等于循环的每一项内容item,通过此法,可以把content传给todoitem组件,传了之后不能直接使用,子组件必须先接受,用props接受从外部传进来的属性。如下:
<todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>
        <ul>
            <todo-item></todo-item>//在此用组件
        </ul>
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>{{content}}</li>'
    })
  • 创建局部组件
    不能直接在父组件的模板里调用,必须在Vue实例中通过components先声明
//var TodoItem里有个对象,对象里有个模板。
    var TodoItem={
        template:'<li>item</li>'
    }
new Vue({
            el:"#root",
            components:{
                'todo-item':TodoItem
            },
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item 
                v-for="(item ,ndex) of list" 
                :key="index"
                :content="item"
                ><!-- //父组件通过属性的形式给子组件todo-item传参 -->
            </todo-item>
        </ul>
    </div>

    <script>

//创建组件的方法,通过Vue.component定义的组件叫做全局组件,
//在任何地方模板里都可以使用
        Vue.component("todo-item", {
            props: ['content'],
//组件接受从外部传进来的一个叫content的属性
            template: '<li>{{content}}</li>'
//定义一个组件叫todo-item,其内容是item
        })


//局部组件,如果想在Vue实例模板里调用,需要在最外层的Vue
//实例里通过components声明
        // var TodoItem = {
        //  template: "<li>item</li>"
        // }



        new Vue({
            el:"#root",
            // components:{
            //  'todo-item':TodoItem
            // },
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                handleSubmit: function(){
                    // 调用push方法让list中增加一个数据
                    this.list.push(this.inputValue)
                    this.inputValue=""
                }
            }
        })
    </script>
</body>
</html>

组件与实例的关系

每一个vue的组件又是一个Vue的实例,组件就是实例,实例就是组件。所以任何一个Vue项目都是由千千万万个Vue实例组成的

     Vue.component('todo-item',{
        props:['content'],
         template:'<li @click="handleClick">{{content}}</li>',
         methods:{
            handleClick:function(){
                alert('clicked')
            }
         }
     })

实现效果:


1552570175(1).jpg

每一个组件里可以写methods等,证明每一个组件都是vue的实例

实现TodoList的删除功能

在Vue中父组件向子组件传值是通过属性进行的。要实现子组件的删除,必须在父组件里,把子组件对应的数据删除。vue里通过发布订阅模式实现子组件和父组件的通信。
父组件循环显示子组件的时候,可以额外在加一个参数等于循环的下标

<todo-item v-for="(item,index) of list" 
:key="index" 
:content="item" 
:myindex="index"></todo-item>

子组件在content之后再加一个myindex,意思是除了从父组件接受到content之外还可以接受到下标。

Vue.component('todo-item',{
        props:['content','myindex'],
         template:'<li @click="handleClick">{{content}}</li>',
         methods:{
            handleClick:function(){
                            }
         }
     })

当子组件被点击的时候,通知父组件,通过调用this.$emit(' ')方法,触发一个自定义的delete事件,事件中携带了下标值。

         methods:{
            handleClick:function(){
            this.$emit('delete',this.myindex)
            }
         }

父组件监听子组件向外触发的事件,监听到之后,执行handleDelete函数,函数中可以接收到一个传递过来的参数子组件传递过来的下标,在父组件中写一个handleDelete函数,把父组件list对应的下标内容删除,通过this.list.splice(myindex,1)从对应下标位置删除掉一项。

        new Vue({
            el:"#root",
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue),
                    this.inputValue=''
                },
                handleDelete:function(myindex){
                    this.list.splice(myindex,1)
                }
            }
        })

全代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item,index) of list" 
            :key="index" 
            :content="item" 
            :myindex="index"
            @delete="handleDelete"
            ></todo-item>
        </ul>
    </div>
    <script>



     Vue.component('todo-item',{
        props:['content','myindex'],
         template:'<li @click="handleClick">{{content}}</li>',
         methods:{
            handleClick:function(){
            this.$emit('delete',this.myindex)
            }
         }
     })

        new Vue({
            el:"#root",
            data:{
                inputValue:'',
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue),
                    this.inputValue=''
                },
                handleDelete:function(myindex){
                    this.list.splice(myindex,1)
                }
            }
        })
    </script>
</body>
</html>

总结

父组件通过属性的方式向子组件传递参数;子组件通过发布订阅模式的方式向父组件传递参数。##

相关文章

  • web前端开发高级

    前端高效开发框架技术与应用 Vue 基础Vue 框架简介 MVX 模式介绍Vue 框架概述如何使用 Vue.js ...

  • 搭建vue+webpack+es6环境

    1、vue介绍 vue属于VM*框架。是 MVVM框架。什么是MVVM框架?就是视图和数据的双向绑定。 vue的核...

  • vue.js 框架

    vue.js 中文网 vue框架 vue是一个 mvvm 框架 node下载vue.js命令 vue属性 计算属性...

  • vue + node + mongodb 搭建客户管理系统

    技术概要 脚手架 vue-cli 3.0 前端框架 vue UI框架 iview 后端语言 node web框架 ...

  • mpvue“踩坑”指南

    mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,框架整体和vue语法保持一...

  • 2021总结计划

    技术总结:①主要框架:vue的框架思想、vue3与react小程序框架与部署git提交规范Vue-cli自定义模板...

  • vue 指令及练习

    人间草木皆有情。 一、vue 为什么选择vue,js轻量级开发框架,三大框架(angular、react、vue)...

  • vue移动端项目搭建

    使用框架:vue 使用插件:vue-cli,vue-loader,axios ,px2rem 使用UI框架:min...

  • Vue.js知识框架

    vue.js框架介绍 vue-cli脚手架搭建基本代码框架 vue-router官方插件管理路由 vue-reso...

  • vue基础-01-重点

    vue 基础-day01-重点 01-基础-vue 是什么 vue前端js框架 库: API需要自己调用 框架: ...

网友评论

      本文标题:Vue框架

      本文链接:https://www.haomeiwen.com/subject/ieynpqtx.html