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>