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.条件与循环

• 这块官网讲了两个指令 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.组建化应用构建

这块准备后面再学