为了账号安全,请及时绑定邮箱和手机立即绑定
  • watch:监听的是一个变量或者是一个常量的变化,这个变量可能是单一的变量,也可能是数组。

    computed:可以监听很多个变量,这个变量一定是在vue实例里面的

    查看全部
  • 查询node版本:node -v

    查询npm版本:npm -v

    全局安装vue-cli工具:npm install -g @vue/cli

    查询vue-cli版本:vue --version

    进入项目目录,创建项目:vue create 项目名

    启动运行项目:npm run serve


    查看全部
    0 采集 收起 来源:认识vue-cli

    2019-05-07

  • <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>列表渲染</title>

    <script type="text/javascript" src="./vue.js"></script>

    </head>

    <body>

    <div id="app">

    <div v-for="item in list">{{item}}</div>

    <hr color="red">

    <div v-for="item1 in userList" v-bind:class="['active', 'add', 'more', {'another':item1.age < 30}]">   

    {{item1.name}} -- {{item1.age}}

    </div>

    <hr color="red">

    <div v-for="item2 in userList" v-bind:class="{'active': true}">

    <div v-if="item2.age > 30">

    <div v-if="item2.sex == '男'">

    {{item2.name}}, 你老了,你个老男人

    </div>

    <div v-else-if="item2.sex == '女'">

    {{item2.name}},你老了,你个老阿姨

    </div>

    </div>

    <div v-else>

    {{item2.name}},{{item2.age}}岁,好年轻

    </div>

    </div>

    <hr color="red">

    <div v-for="item3 in userList">

    <div v-show="item3.age < 30" v-bind:>

    {{item3.name}}-{{item3.age}}-{{item3.sex}}

    </div>

    </div>

    </div>


    <script type="text/javascript">

    new Vue({

    el: "#app",

    data: {

               list: [1,2,3,4,5,6,7,8,9],

               userList: [{

                name: "刘豆豆",

                age: 23,

                sex: "男"

               },{

                name: "小三",

                age: 18,

                sex: "女"

               },{

                name: "老王",

                age: 40,

                sex: "男"

               },{

                name: "花花",

                age: 35,

                sex: "女"

               }],

               style: {

                color: 'red',

                textShadow: '0 0 5px green'

               }

    }

    })

    </script>

    </body>

    </html>


    查看全部
  • 条件渲染:v-if v-else v-else-if,v-show

    查看全部


  • 传值变量可任意但必须前后一致https://img1.sycdn.imooc.com//5ccfa4230001f59d02790195.jpg

    查看全部
    0 采集 收起 来源:第一个vue应用

    2019-05-06

  • xiaobaihttps://img1.sycdn.imooc.com//5cce638800017a3607060388.jpg

    查看全部
    0 采集 收起 来源:知识点解释

    2019-05-05

  • new template({
     el: '#app',
     data: {
       msg: 'Hello Vue!!',
       count: 0,
       template: '<div>test template</div>',
       idName: 'bg1',
       href: 'http://www.baidu.com'
     },
     methods: {
       add:function(){ this.count++ }
     }
    });

    思考本章学习内容:

    1. Vue的结构
      <div id="app"></div>//在此处生效

    2. 模板语法包括:
      - {{msg}}以及{{count*20}}
      - 属性绑定语法:v-bind:id ="idName" 以及v-bind:href="href"
      - 绑定html:v-html=“template”
      - 绑定事件:v-on:click="add()"

    3. 其中指令可以缩写:
      - v-bind:href="xx"变为:href="xx"
      - v-on:click="yy()"变为@click="yy()"


    查看全部
    0 采集 收起 来源:模板语法

    2019-05-05

  • 视频不清晰啊

    查看全部
    0 采集 收起 来源:知识点解释

    2019-05-04

  • computed和watch的区别wathc==》异步场景

    computed==》数据联动

    查看全部
  • computed只监听new vue实例里变量实例外的变量不起作用

    查看全部
  • computed监听着msg1 function中任何一个变量的变化,而watch只监听着msg值的变化。

    查看全部
  • computed监听着msg1 function中任何一个变量的变化,而watch只监听着msg值的变化

    查看全部
  • watch demo以及调试

    查看全部
  • 计算机属性和侦听器

    查看全部
  • 模板语法内容

    查看全部
    0 采集 收起 来源:模板语法

    2019-05-03

举报

0/150
提交
取消
课程须知
1.前端基础知识的HTML,Javascript, css 2.适合于前端小白,想了解最流行的前端框架的小伙伴。 3.有基础的前端/后台人员,想提高工作效率,扩展前端框架的应用的人
老师告诉你能学到什么?
1. vue常用模板语法 2. 列表渲染、条件渲染 3. Class与style绑定 4. vue事件绑定与处理 5. vue计算属性computed, watch 6. vue-cli快速创建工程 7. vue的组件思想,代码规范 8. vue-router介绍 9. 认识vuex,组件间的通信方式 10. 前端调试方法,vue组件调试方法

微信扫码,参与3人拼团

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

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