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-ifv-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.组建化应用构建

这块准备后面再学

    原文作者:邢走在云端
    原文地址: https://segmentfault.com/a/1190000018405871
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞