vue官网学习笔记（一）介绍

Bertha 。 2022-04-23 01:22 172阅读 0赞

vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计。Vue的核心库只关注图层。

# 声明式渲染 #

运用简洁的模板语法来声明式地将数据渲染进DOM系统：

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

显示效果

Hello Vue!

### 属性 ###

v-bind指令绑定属性

例如：v-bind:class  可用于判断指定的样式

v-bind:title

# 条件与循环 #

v-if控制切换元素的显示

<div id="app-3">
        <p v-if="seen">Now you see me</p>
    </div>
    
    var app3 = new Vue({
        el:'#app-3',
        data:{
            seen:true
        }
    })

显示效果：

Now you see me

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 : 'Learn JavaScript' },
                { text : 'Learn Vue' },
                { text : 'Build something awesome' }
            ]
        }
    })

显示效果：

1.Learn JavaScript
    2.Learn Vue
    3.Build something awesome

app4.todos.push(\{ text: 'New item' \})

可向列表中新增一条新内容

# 处理用户输入 #

v-on指令绑定监听事件用于调用Vue实例中定义的方法：

<div id="app-5">
        <p>{
       { message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</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!'
        }
    })

当改变input中的值时，p元素中的值也会改变。

# 用组件构建（应用）component★★★★★ #

全局component：

<ul>
        <todo-item></todo-item>
    </ul>
    
    Vue.component('todo-item',{
        template: '<li>This is a todo</li>'
    })

以上会为每个todo渲染同样的文本，应该将数据从父作用域传到子组件，可运用prop字段，利用v-bind指令将todo传到每一个重复的组件中：

<div id="app-7">
      <ol>
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
      </ol>
    </div>
    
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{
       { todo.text }}</li>'
    })
    var app7 = new Vue({
      el: '#app-7',
      data: {
        groceryList: [
          { text: 'Vegetables' },
          { text: 'Cheese' },
          { text: 'Whatever else humans are supposed to eat' }
        ]
      }
    })

显示效果：

Vegetables
    Cheese
    Whatever else humans are supposed to eat