脚本宝典收集整理的这篇文章主要介绍了vue2 基础学习01 （ 核心最基本的功能），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

vue官网

根据官网一步步学习

1.项目构建

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

  PE="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" " tITle="" data-original-title="复制">

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <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的语法知识:

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

这块准备后面再学

脚本宝典总结

以上是脚本宝典为你收集整理的vue2 基础学习01 （ 核心最基本的功能）全部内容，希望文章能够帮你解决vue2 基础学习01 （ 核心最基本的功能）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。