zoukankan      html  css  js  c++  java
  • vue学习之vue基本功能初探

    vue学习之vue基本功能初探:

    采用简洁的模板语法将声明式的将数据渲染进 DOM:

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

    v-bind方式绑定dom元素属性:

    <div id="app-2">
          <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息!
          </span>
    </div>
    var app2 = new Vue({
                el: '#app-2',
                data: {
                  message: '页面加载于 ' + new Date()
                }
    });

    v-if进行条件控制:

    <div id="app-3">
           <p v-if="seen">现在你看到我了</p>
    </div>
     var app3 = new Vue({
                el: '#app-3',
                data: {
                  seen: true
                }
            });

    v-for进行循环显示数据:

    <div id="app-4">
          <ol>
            <li v-for="todo in todos">
              {{ todo.text }}
            </li>
          </ol>
    </div>
    var app4 = new Vue({
                  el: '#app-4',
                  data: {
                    todos: [
                      { text: '学习 JavaScript' },
                      { text: '学习 Vue' },
                      { text: '整个牛项目' }
                    ]
                  }
            });

    用v-on 指令绑定一个调用 Vue 实例方法的事件监听器:

    <div id="app-5">
              <p>{{ message }}</p>
              <button v-on:click="reverseMessage">逆转消</button>
    </div>
    var app5 = new Vue({
                  el: '#app-5',
                  data: {
                    message: 'Hello Vue.js!'
                  },
                  methods: {
                    reverseMessage: function () {
                      this.message = this.message.split('').reverse().join('')
                    }
                  }
            });

    v-model 指令,使表单输入和应用状态间的双向绑定变得轻而易举。

    <div id="app-6">
             <p>{{ message }}</p>
             <input v-model="message">
    </div>
     var app6 = new Vue({
                el: '#app-6',
                data: {
                  message: 'Hello Vue!'
                }
            });

    组件化,使用vue.component()创建一个组件。

    <div id="app-7">
          <ul>
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
          </ul>
    </div>
    Vue.component('todo-item', {
              props: ['todo'],
              template: '<li>{{ todo.text }}</li>'
            })
            var app7 = new Vue({
              el: '#app-7',
              data: {
                groceryList: [
                  { text: '蔬菜' },
                  { text: '奶酪' },
                  { text: '随便其他什么人吃的东西' }
                ]
              }
            })

    组件的应用是vue的一个最大的好处, Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分,这是因为 Vue 的组件语法部分参考了该规范
    下面是一个关于组件的预想结构:
    <div id="app">
         <app-nav></app-nav>
         <app-view>
         <app-sidebar></app-sidebar>
         <app-content></app-content>
         </app-view>
    </div>

  • 相关阅读:
    hdu 2485 Destroying the bus stations 迭代加深搜索
    hdu 2487 Ugly Windows 模拟
    hdu 2492 Ping pong 线段树
    hdu 1059 Dividing 多重背包
    hdu 3315 My Brute 费用流,费用最小且代价最小
    第四天 下载网络图片显示
    第三天 单元测试和数据库操作
    第二天 布局文件
    第一天 安卓简介
    Android 获取存储空间
  • 原文地址:https://www.cnblogs.com/xinggood/p/6558798.html
Copyright © 2011-2022 走看看