为了账号安全,请及时绑定邮箱和手机立即绑定

vue.js入门基础

fishenal Web前端工程师
难度中级
时长 1小时50分
学习人数
综合评分9.17
315人评价 查看评价
9.4 内容实用
9.2 简洁易懂
8.9 逻辑清晰
  • 注册组件app

    查看全部
  • 一、v-bind对vue元素属性的操作v-bind:src = "属性名'

    二、对方法1的简写,通过class

    属性:isRed (isRed是用来判断是否展现这个属性)


    查看全部
  • 时间绑定:on

    查看全部
  • 渲染循环列表

    查看全部
  • 控制模块隐藏

    查看全部
  • 模板指令:数据渲染

    查看全部
  • 1、data 数据字段(this.a ,this.b);

    2、methods 方法字段;

    3、watch 监听字段;


    查看全部
  • 需要自己写一下

    查看全部
  • <template>

        <div id="app">

            <h1 v-text="title"></h1>

            <input v-model="newItem" v-on:keyup.enter="addNew"/>

            <ul>

                <li  v-for="item in items" v-bind:class="[finished:items.isFinshed]" v-on:click="change(item)"></li>

            </ul>

        </div>

    </template>


    <script>

        var vm = new Vue({

            data: {

                title: "this is a todo list",

                items: [

                    {

                        label: "cooding",

                        isFinished:true

                    }, {

                        label: "book",

                        isFinished: true

                    }

                ],

                newItem:''


            },

            methods: {

                change: function (item) {

                    item.isFinished != isFinished

                },

                addNew: function () {

                    this.item.push({

                        label: this.newItem,

                        isFinished: true

                    })

                    this.newItem=""

                }


            }

        });



    </script>

    <style>

        .finished {

            color:redd;

        }



    </style>











    查看全部
  • 从.vue到页面

    查看全部
    0 采集 收起 来源:从.vue到页面

    2018-11-01

  • 1、data 数据字段(this.a ,this.b);

    2、methods 方法字段;

    3、watch 监听字段;

    4、数据渲染:v-text、v-html、{{}}

    5、控制模块隐藏:v-if、v-show;

    6、渲染循环列表:v-for;

    7、事件绑定:v-on  (v-on:click 或者 @click);

    8、属性绑定:v-bind  (v-bind:class 或者 :class);

    查看全部
  • el 相当于 element

    查看全部
    0 采集 收起 来源:从.vue到页面

    2018-10-30

  • 1-1

    1. 吸收了react的组件化(数据展现分离)

    2. 吸收了angular的指令和页面操作的方法。

      官网:cn.vuejs.org


    3. <div id="app">
        {{ message }}
      </div>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!'
        }
      })



    4. Hello Vue!


    查看全部
  • 新建一个vue对象的时候你可以设置他的属性,其中最重要的包括三个,分别是data,methods.watch。

    其中data代表vue对象的数据,methods代表vue对象的方法,watch设置了对象监听的方法。

    Vue对象里的设置通过html指令进行关联。

    重要的指令包括 :

    1. v-text渲染数据

    2. v-if控制显示

    3. v-on绑定事件

    4. v-for循环渲染等


    查看全部
  • 一、v-bind:class简写成:class 二、class 1、:class="{isFinished:item.isFinished}",控制是否有这个class 2、:class="[isRed,isBlue]",添加2个class

    查看全部

举报

0/150
提交
取消
课程须知
1. 有html,css,js前端开发基础 2. 了解前端工程化,node,webpack gulp等 3. 对前端模块化有基本的概念 4. es6 的一些基本语法
老师告诉你能学到什么?
1. vuejs的背景及其项目相关知识 2. 了解流行的前端项目搭建方式 webpack + gulp 3. 用 vue-cli 脚手架工具初始化vue项目 4. 学习vue项目基本的结构和开发方法 5. 学习使用vuejs常用的接口和方法 6. 教程中教你如何在一个项目中使用vuejs

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!