Vue学习 Day01

介绍

这个系列记录自己学习Vue的过程.

Vue官方不推荐新手直接使用 vue-cli,所以前面这几天都是根据官方文档学习.

步骤

  1. 新建一个html文件.

  2. 在html中导入vue.js依赖.

     
     
     firstvue
     
     
     
     
     
  3. 现在就可以照着官方的例子学习了.

例子

声明式渲染

数据和 DOM 建立了关联,修改了js中data的值,DOM也会发生变化.

  1. Hello Vue

     
    {{ message }}

    JS代码:

     var app = new Vue({
         el: '#app',
         data: {
             message: 'Hello Vue!'
         }
     })
  2. v-bind 指令1,作用是:鼠标停留几秒,会有提示信息.

     
    鼠标悬停几秒钟查看此处动态绑定的提示信息!

    JS代码:

     var app2 = new Vue({
         el: '#app-2',
         data: {
             message: '页面加载于 ' + new Date().toLocaleString()
         }
     })

条件与循环

  1. 控制元素显示 使用 v-if,seen的值决定是否显示.

     

    现在你看到我了

    JS代码:

     var app3 = new Vue({
         el: "#app-3",
         data: {
             seen: true
         }
     })
  2. 循环 使用v-for ,在控制台输入app4.todos.push({text: 'push text'}),列表添加一个项

     
    1. {{ todo.text }}

    JS代码:

     var app4 = new Vue({
         el: "#app-4",
         data: {
             todos: [
                 { text: '学习Vue' },
                 { text: '整个项目' },
                 { text: '完成毕设' }
             ]
         }
     })

处理用户输入

v-on指令添加一个事件监听器

{{ message }}

JS代码:

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
    methods: {
        reverseMessage: function(){
            this.message = this.message.split('').reverse().join('')
        }
    }
})

v-model 轻松实现表单输入和应用状态之间的双向绑定.

{{ message }}

JS代码:

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})

组件化应用构建

组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。

JS代码:

Vue.component('todo-item', {
    // todo-item 组件现在接受一个
    // "prop",类似与一个自定义特性。
    // 这个prop 名为todo。
    props: ['todo'],
    template: '
  • {{ todo.text }}
  • ' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '随便其它什么人吃的东西' } ] } })

    (假想)大型应用模板

    源码下载

    https://www.lanzous.com/b00t79wkd
    密码:Vue01

    注解

    el:对应div中的id

    data:存放数据

    methods: 存放方法


    1. 指令是Vue提供的特殊特性,指令带有前缀 v-.↩

    你可能感兴趣的:(Vue学习 Day01)