vue极速入门笔记（一）

╰+哭是因爲堅強的太久メ 2022-05-13 17:52 258阅读 0赞

> 开发之路，羊肠九曲，荆棘密布，幸得高人指点，前辈填坑，一路谨小慎微，终得工程圆满；其间填坑之经验，开路之历程，皆为精华，不可弃之；记录于此，以便事后回顾，亦想于有相关开发疑惑之同学做参考之用，文中如若有错，恳请雅正，不胜感激。

# Vue.js #

## 简介 ##

构建用户界面的渐进式框架，采用自底向上增量开发的设计。很久之前需要用到vue时的学习记录，希望能帮助到正在入门的同学们。

## 起步 ##

### 使用 ###

需要引入vue

声明式渲染

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

绑定 DOM 元素属性：

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

指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。

条件与循环

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

### 构造器 ###

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的：

var viewmodel = new Vue({
    	//配置
    })

### 属性与方法 ###

var data = { a: 1 }
    var vm = new Vue({
      data: data
    })
    vm.a === data.a // -> true
    // 设置属性也会影响到原始数据
    vm.a = 2
    data.a // -> 2
    // ... 反之亦然
    data.a = 3
    vm.a // -> 3