vue2.5入门(推荐,差代码) 原

课程地址:https://www.imooc.com/learn/980

教程:https://cn.vuejs.org/v2/guide

放在头部,避免页面出现抖屏

挂载点

下面是原生

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        
    </div>
    <script>
        // 挂载点,模板,实例之间的关系
        new Vue({
            el: "#root",//挂载点
            template:   '<h1>{{msg}}</h1>',//模板
            data: {
                msg:    "hello world1"//实例
            }
        })    
        // 在vue内部实际操作
        // var dom = document.getElementById('root')
        // dom.innerHTML = "hello world"


    </script>
</body>
</html>

插值表达式,写法一

v-text指令,写法二

v-html指令,写法三

v-html与v-text区别:

被转义

未被转义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 写法一:插值表达式 -->
        <h1>{{number1}}</h1>
        <!-- 写法二:v-text指令 -->
        <h1 v-text='number2'></h1>
        <!-- 写法三:v-html指令 -->
        <h1 v-html='number3'></h1>
        <!-- v-html与v-text区别:v-html的标签对未被转义 -->
        <h1 v-text='number4'></h1>
        <h4 v-html='number4'></h1>
        
    </div>
    <script>
        // vue实例中的数据
        new Vue({
            el: "#root",
            data: {
                msg:    "hello world1",
                number1:    '111',
                number2:    '222',
                number3:    '333',
                number4:    '<h1>444</h1>'
            }
        })    



    </script>
</body>
</html>

指令,v-on绑定事件,箭头函数

简写

v-bind指令,绑定title,属性绑定

等号后面内容是js表达式,不是字符串

简写

单项绑定

v-model指令,双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- <div    v-on:click='()=>{alert(123)}'>{{content}}</div> -->
        <!-- v-on事件绑定 -->
        <div    v-on:click='handdleclick'>{{content}}</div>
        <!-- v-on事件绑定的简写 -->
        <div    @click='handdleclick'>{{content}}</div>

        <!-- v-bind属性绑定 -->
        <div v-bind:title='title'>hello title1</div>
        <div v-bind:title='"del lee"   +   title'>hello title2</div>
        <!-- v-bind属性绑定的简写    -->
        <div :title='title'>hello title3</div>
        
        <!-- v-model数据双向绑定 -->
        <input v-model='double'>    
        <div>{{double}}</div>     
                    
    </div>
    <script>
        // vue中的绑定事件
        new Vue({
            el: "#root",
            data: {
                content:    "hello world1",
                title:  'this is hello world',
                double: 'this is data'
            },
            methods: {
                handdleclick:   function(){
                    // alert(123)
                    this.content = 'world'
                }
            }
        })    



    </script>
</body>
</html>

computed,计算属性,如果没改变,会使用上一次计算的缓存结果

计算

和react的reselect库很像

watch,侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
               姓:<input v-model='firstName'>     
               名:<input v-model='lastName'>
               <div>{{firstName}}   {{lastName}}</div>
               <div>{{fullName}}</div>   
               <h2>{{count}}</h2>  
               
    </div>
    <script>
        // vue中的计算属性和侦听器
        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>
</body>
</html>

指令v-if,会从dom树上清除

点击隐藏显示

指令v-show,不从dom树上删除

display=none

指令v-for,数据做循环

:key会提升每项渲染数据的效率,但是要求每一项数据不同

添加index下标,相同数据也可以

但如果要频繁对数据进行排序,index会出错。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root"> 
        <!-- v-if指令,会从dom上清除 -->
        <div v-if='show1'>hello1</div>
        <button @click=handleClick1>toggle1</button>

        <!-- v-show指令,不会从dom上清除 -->
        <div v-show='show2'>hello2</div>
        <button @click=handleClick2>toggle2</button>

        <!-- v-for指令,数据循环 -->
        <ul>
            <li v-for='item of list1'>{{item}}</li>
        </ul>
        <!-- :key会提升每项渲染数据的效率,但是要求每一项数据不同 -->
        <ul>
            <li v-for='item of list2' :key="item">{{item}}</li>
        </ul>
        <!-- 添加index下标,相同数据也可以 -->
        <ul>
            <li v-for='(item,index) of list3' :key="item">{{item}}</li>
        </ul>
    </div>
    <script>
        // vue中的计算属性和侦听器
        new Vue({
            el: "#root",
            data: {
                show1:   true,
                show2:   true,
                list1:   [1,1,1],
                list2:   [4,4,6],
                list3:   [7,6,6],     
            },
            methods: {
                handleClick1:    function(){
                    this.show1   =   !this.show1
                },
                handleClick2:    function(){
                    this.show2   =   !this.show2
                }
            }

        })    



    </script>
</body>
</html>

点击提交并且数据写在下边,input框消失

Vue.component定义的是全局组件

var一个,局部组建,在父组件外边是调用不了的

组件声明,实例模板里就可以使用

传参

会报错,彩曾传递不能直接使用

利用props来接收传递过来的参数

每一个vue的组件又是vue的一个实例

根组件下没有模板的时候,会用挂载点下的内容当模板

父组件到子组件通过属性传递

子组件如果想被删除,就要在父组件里把子组件的那条数据给删除

增加一个参数,index

接收index。通过$emit通知父组件,触发delete事件

父组件监听delete事件,监听到的时候,触发handleDelete事件

通过子组件向父组件传值的方式,做好删除

npm install --global vue-cli
vue init webpack todolist
cd todolist
npm run dev

bulid下放置webpack的配置文件

config是针对开发环境和线上环境的一些文件

node_modules是项目的依赖

src是源代码所放置的目录

static是静态资源

浏览器编译,es6检测,不需要改动

整个网页app

——————————————————

src/main.js整个项目的入口文件

创建了一个vue的实例,id=‘app’的挂载点

注册了一个局部组建App(es6语法引入)

模板就是App组建的内容

Es6:如果键值都相同,只写一个App

template模板,script标签-组建逻辑,style样式

vue-cli里的语法:单文件组建

npm run dev
npm run start

以前data是对象,用{},现在是函数

es6简化写法

this指向本组件的实例

缩写,别名

注册局部组建

v-for循环

父组件向子组件传值,利用属性传值

子组件接收传值

增加功能实现

传递index

接收传递

解决console里的警告问题,加一个:key

子组件触发事件传递父组件,$emit

父组件监听delete

触发删除事件

子组件样式不会影响父组件

scoped样式作用域

去掉scoped就会影响父组件

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

厚土Go学习笔记 | 19. slice和数组很像,但是slice可以添加元素

slice中文可以称为“切片”。是Go语言为处理同类型数据序列提供的一个高效且方便的方式。是在数组上抽象的一个数据类型。 切片的使用相当的广泛。 切片可以直接赋...

3897
来自专栏前端说吧

JS-DOM2级封装练习题--点击登录弹出登录对话框

3377
来自专栏liulun

学习WPF——元素绑定

概念 从源对象提取一些信息,并用这些信息设置目标对象的属性 示例 image.png image.png 数据绑定表达式使用XAML的标记扩展(因此具有花括号)...

2266
来自专栏小古哥的博客园

HTML5复习整理

一、推出的目标 web浏览器兼容性低;文档结构不明确;web应用程序的功能受限 二、语法的改变 内容类型(html或htm);DOCTYPE声明简化;指定字符编...

3787
来自专栏软件开发

一个小时学会jQuery

前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法。 一、jQuery简介...

2797
来自专栏Google Dart

AngularDart4.0 指南- 模板语法二 顶

Class绑定语法类似于属性(property)绑定。 以前缀类开始,可选地跟一个点(.)和一个CSS类的名字替代括号内的元素属性:[class.class-n...

1252
来自专栏开源项目

Vue 2.0 学习总结,精华全在这里了

摘要:年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! 1Vue 介绍 Vue 是什么? https://vuefe.cn/guide ...

31511
来自专栏逸鹏说道

01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!-...

3004
来自专栏IMWeb前端团队

Zepto源码分析之form模块

前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍zepto中form模块关于表单处理的几个...

20710
来自专栏Google Dart

AngularDart Material Design 输入 顶

Selector: <material-input:not(material-input[multiline])>

1404

扫码关注云+社区

领取腾讯云代金券