跟着b站上的视频来学

首先什么是vue.js？

跟着b站上视频来学：(oﾟvﾟ)ノ

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script src="vue.min.js"></script>

<!--    绑定数据-->

<!--    <div id="app">-->

<!--        <counter heading="Likes" ></counter>-->

<!--        <counter heading="Disliakes" ></counter>-->

<!--    </div>-->

<!--    <template id="counter-template">-->

<!--        <div>-->

<!--            <h1>{{heading}}</h1>-->

<!--            <button @click="count += 1" >Submit {{count}}</button>-->

<!--        </div>-->

<!--    </template>-->

<!--    <script>-->

<!--        Vue.component('counter',{-->

<!--            template:'#counter-template',-->

<!--            props:['heading'],    //代表heading是变量-->

<!--            data:function () {-->

<!--                return{count:};-->

<!--            }-->

<!--        })-->

<!--        new Vue({-->

<!--            el: '#app',-->

<!--            data:{-->

<!--                mygame:"shsdhjsd"-->

<!--            }-->

<!--        })-->

<!--    </script>-->

<!--    第一步：调用数据-->

<!--    <div id="app">-->

<!--        <p>game you love</p>-->

<!--        <input v-model="mygame">-->

<!--    </div>-->

<!--    <script>-->

<!--        new Vue({-->

<!--            el: '#app',-->

<!--            data:{-->

<!--                mygame:"超级马里奥"-->

<!--            }-->

<!--        })-->

<!--    </script>-->

<!--    v-on 调用不同的事件（简写为@）-->

<!--    <div id="app">-->

<!--        <p>你最喜欢的游戏:{{mygame}}</p>-->

<!--        <button v-on:click="btnclick('我的世界')">我的世界</button>-->

<!--        <button v-on:click="btnclick('塞尔达')">塞尔达</button>-->

<!--        <button v-on:click="btnclick('勇者斗恶龙')">勇者斗恶龙</button>-->

<!--    </div>-->

<!--    <script>-->

<!--        new Vue({-->

<!--            el: '#app',-->

<!--            data:{-->

<!--                mygame:"超级马里奥"-->

<!--            },-->

<!--            methods:{-->

<!--                btnclick:function (pname) {-->

<!--                    this.mygame = pname;-->

<!--                }-->

<!--            }-->

<!--        });-->

<!--    </script>-->

<!-- 组件：-->

<!--    item循环games数组，得到元素，将得到的元素给组件中的变量game进行操作-->

<!--    <div id="app">-->

<!--        <ol>-->

<!--            <game-item v-for="item in games" v-bind:game="item"></game-item>-->

<!--        </ol>-->

<!--    </div>-->

<!--    <script>-->

<!--        Vue.component('game-item',{-->

<!--            props:['game'],-->

<!--            template:'<li>{{game.title}}</li>'-->

<!--            }-->

<!--        )-->

<!--        new Vue({-->

<!--            el: '#app',-->

<!--            data:{-->

<!--                games:[-->

<!--                    {title:'斗地主'},-->

<!--                    {title:'打麻将'},-->

<!--                    {title:'UNO'}-->

<!--                ]-->

<!--            }-->

<!--        });-->

<!--    </script>-->

<!--过滤器：格式化变量内容的输出(日期格式化、字母大小写。。)-->

<!--    <div id="app">-->

<!--        <p>{{message}}</p>-->

<!--        <p>{{message | toupper}}</p>-->

<!--        <hr/>-->

<!--        <p>现在的vue.js的学习进度是{{num | topercentage}}</p>-->

<!--    </div>-->

<!--    <script>-->

<!--        new Vue({-->

<!--            el: '#app',-->

<!--            data:{-->

<!--                message:'hello world!',-->

<!--                num : 0.3,-->

<!--            },-->

<!--            filters:{-->

<!--                toupper:function (value) {-->

<!--                    return value.toUpperCase();-->

<!--                },-->

<!--                topercentage:function (value) {-->

<!--                    return value*+'%';-->

<!--                }-->

<!--            }-->

<!--        });-->

<!--    </script>-->

<!--    计算属性：处理元数据，便于进行二次利用-->

<!--    <div id="app">-->

<!--        今年发行的游戏的价格是{{price}}，含税价格是{{priceInTax}},折合位人民币{{priceChinaRMB}}.-->

<!--    </div>-->

<!--    <script>-->

<!--        new Vue({-->

<!--            el: '#app',-->

<!--            data:{-->

<!--                price:,-->

<!--            },-->

<!--            computed:{-->

<!--                priceInTax:function () {-->

<!--                    return this.price*1.08;-->

<!--                },-->

<!--                priceChinaRMB:function () {-->

<!--                    return Math.round(this.priceInTax/16.75);-->

<!--                }-->

<!--            }-->

<!--        });-->

<!--    </script>-->

<!--    监视属性(监视属性是否发生变化)：与computed属性类似，用于观察变量的变化，然后进行处理-->

<!--    <div id="app">-->

<!--        今年发行的游戏的价格是{{price}}，含税价格是{{priceInTax}},折合位人民币{{priceChinaRMB}}.-->

<!--        <hr/>-->

<!--        <button @click="btnClick(10000)">加价10000</button>-->

<!--    </div>-->

<!--    <script>-->

<!--        new Vue({-->

<!--            el: '#app',-->

<!--            data:{-->

<!--                price:,-->

<!--                priceInTax:,-->

<!--                priceChinaRMB:,-->

<!--            },-->

<!--            watch:{-->

<!--                price:function (newVal,oldVal) {-->

<!--                    console.log(newVal,oldVal);-->

<!--                    this.priceInTax = Math.round(this.price *1.08);-->

<!--                    this.priceChinaRMB = Math.round(this.priceInTax /16.75);-->

<!--                }-->

<!--            },-->

<!--            methods:{-->

<!--                btnClick:function (newPrice) {-->

<!--                    this.price += newPrice;-->

<!--                }-->

<!--            }-->

<!--        });-->

<!--    </script>-->

<!--    v-bind:为html标记绑定样式单属性-->

<!--        <style>-->

<!--            .active{-->

<!--                color:red;-->

<!--            }-->

<!--        </style>-->

<!--        <div id="app">-->

<!--            <div v-bind:class="{active:isActive}">红色文本1</div>-->

<!--            <div :class="{active:isActive}">红色文本1</div>-->

<!--            <button @click="btnClick">改变文本颜色</button>-->

<!--        </div>-->

<!--        <script>-->

<!--            new Vue({-->

<!--                el: '#app',-->

<!--                data:{-->

<!--                    isActive:true,-->

<!--                },-->

<!--                methods:{-->

<!--                    btnClick:function () {-->

<!--                        this.isActive = false;-->

<!--                    }-->

<!--                }-->

<!--            });-->

<!--        </script>-->

<!--    Class对象绑定:为html绑定class对象-->

    <style>

        .active{

            color:red;

        }

        .big{

            font-weight: bolder;

            font-size: 64px;

        }

    </style>

    <div id="app">

        <div v-bind:class="myClass">红色文本1</div>

        <button @click="btnClick">改变文本大小</button>

    </div>

    <script>

        new Vue({

            el: '#app',

            data:{

                myClass:{

                    active:true,

                    big:true,

                }

            },

            methods:{

                btnClick:function () {

                    this.myClass.big = !this.myClass.big;

                }

            }

        });

    </script>

</body>

</html>

vue.js 初步学习的更多相关文章

  1. Vue.JS入门学习随笔

    PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!!   Vue.js(读音 /vjuː/, 类似于view ...

  2. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  3. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  4. vue.js的学习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue.js路由学习笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  6. web前端——Vue.js基础学习

    近期项目的前端页面准备引入Vue.js,看了网上一些简介,及它和JQuery的对比,发现对于新入门的前端开发来说,Vue 其实也是比较适用的一个框架,其实用性不比JQuery差,感觉还挺有意思,于是研 ...

  7. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  8. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  9. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

随机推荐

  1. MyBatis 的案例

    首先我们需要先下载jar包 其次我们书写具体的内容 Student  Class package entity; /* * 学生类 * */ public class Student { //学生编号 ...

  2. 欧姆龙_NX1P_PLC功能模块_限定安全作业空间

    程序  和说明 以及流程图 已上传到百度云盘 https://pan.baidu.com/s/1kYF11pQHJ4VxyaXr8E_gAA 主要是用来向量的叉乘  判断俩向量正向夹角

  3. 日后成为人工智能领域的小大佬，立个flag~

    时间过的很快,仿佛就在昨天我还是一个机械在校硕士.但现在我已经开始在互联网企业中上班了,第一周的小任务进行简单的数据处理,自己搞的很不好,路还很长,但来日方长! 这周开始学习爬虫,最近会很忙,希望能改 ...

  4. golang web框架 beego 学习 （六） request body和module的映射

    router.go package routers import ( "gowebProject/controllers" "github.com/astaxie/bee ...

  5. async/await小知识点

    一.使用async修饰的函数,返回的内容就是一个Promise,因此可以使用Promise对象所有的方法,如then等 二.在async函数中使用await是否会影响其他代码的执行,答案是:不会.

  6. 安装Node.js教程

    前期准备 1.Node.js 简介简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node ...

  7. jira使用一：如何给项目分组、sprint并行、禁止发送消息给atlassian

    问题一:如何设置多个sprint并行? 问题二: 如何分组显示 设置泳道,并快速过滤 问题3:添加所属产品? 管理员登录Jira后台设置-问题-自定义字段找到:所属产品,进入 配置 界面在配置界面中, ...

  8. python线程事件Event（30）

    在python项目开发中,线程thread使用是比较常见的,在前面的文章中我们介绍了 python线程的创建 以及 线程互斥锁 ,今天还要额外介绍一个与线程相关的内容 – 事件Event. 一.pyt ...

  9. win10系统，jdk环境变量配置，编辑系统变量窗口显示旧版单行和新版列表问题

    大家好,今天说一下我在配置jdk环境变量时遇到的编辑系统变量窗口显示问题. 首先我们说一下如何配置jdk环境变量. 右击此电脑,点击属性. 跳出如下窗口,点击高级系统设置. 跳出如下窗口,点击环境变量 ...

  10. Java程序员必会常用Linux速查手册

    目錄 系统服务管理 文件管理 查看日志 压缩与解压 磁盘和网络管理 防火墙 ftp操作 软件的安装与管理 其他 系统服务管理 systemctl 输出系统中各个服务的状态: systemctl lis ...