vue2 基础学习01 （ 核心最基本的功能）

vue学习路径和建议----尤雨溪

vue官网

根据官网一步步学习

1.项目构建

• 引入vue库，初学时直接通过CDN

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.声明式渲染

• 留坑

  在html中创建区域（元素标签）

  <div id="app">
    {{ message }} <!--插值表达式--> 
  </div>
  

• 实例化

  在script标签中实例Vue,渲染数据

  var app = new Vue({
    el: '#app',//element,找到所渲染的坑位（div）
    data: {    //数据
      message: 'Hello Vue!'
    }
  })
  

• 接下来官网介绍了指令v-bind

  从后面我了解了下v-bind的语法知识:

  vue单向数据流绑定 ： v-bind: (属性) 简写 :(属性)

  例子：<input v-bind:value="name" v-bind:class="name">

  • 也可以绑定其他的属性，不仅仅是value
  • 单向数据绑定 内存改变影响页面改变
  • v-bind就是对属性的简单赋值,当内存中值改变，还是会触发重新渲染

  官网的例子简化

  <div id="app-2">
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>
  

  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '我就是title的内容，哈哈哈'
    }
  })
  

  以上的v-bind:title="message" 可以简化为 :title="message"

  以后再细学。

  ---

3.条件与循环

在 Scrimba 上尝试这节课

• 这块官网讲了两个指令v-if 和 v-for

  • v-if

    根据表达式的值的真假条件，销毁(remove)或重建(append)元素

    <div id="app-3">
      <p v-if="seen">现在你看到我了</p>
    </div>
    

    var app3 = new Vue({
      el: '#app-3',
      data: {
        seen: true //可改为false
      }
    })
    

    将true改为 false，p标签将消失！！！

  • 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: '整个牛项目' }
        ]
      }
    })
    

    ---

4.处理用户输入

• 这块是v-on事件绑定

  事件绑定v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名"

  官网的例子：添加一个可以逆转一句话的事件

  <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!'
    }
  })
  

  ---

5.组建化应用构建

这块准备后面再学