专栏首页vue学习介绍-vuejs官网学习笔记

介绍-vuejs官网学习笔记

       前言:这两天把vuejs官方文档都看了一遍(路由的文档还没看),现在回过头来再结合英文文档重新看一遍 ,为的是学下英文,然后总结性的写一下。尽管vuejs的官方文档写得详细又好,但是总觉得吧,知识这东西还是得自己跟着文档把代码手敲一遍,把要点写写,这样才能把别人的知识变成自己的。感觉自己要学的东西还有很多,长路漫漫,上下求索吧!

vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。

1、声明式渲染 ①vue.js的的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM:

<div id="app">
  {{message}}
</div>

//js
var app=new Vue({
    el:"#app",
    data:{
        message:"hello Vue!"
    }
});

②绑定DOM元素属性 它们会在渲染的 DOM 上应用特殊的响应式行为。简言之,这里该指令的作用是:“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

<div id="app">
    <span v-bind:title="message">
        将鼠标放到上面将看到title文字信息
    </span>
</div>

//js
var app=new Vue({
    el:"#app",
    data:{
        message:"U loaded this page on"+new Date();
    }
});

2、条件和循环 ① 控制切换一个元素的显示。 这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据

<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>

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

② v-for 指令可以绑定数组的数据来渲染一个项目列表(类似于for-in循环)

<div id="app-4">
 <ol>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
 </ol>
</div>

//js
var app4 = new Vue({
 el: '#app-4',
 data: {
  todos: [
    { text: '学习 JavaScript' },
    { text: '学习 Vue' },
    { text: '整个牛项目' }
  ]
 }
});

3、处理用户输入 ①我们可以用v-on指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法。 注意在 reverseMessage 方法中,我们更新了应用的状态,但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理,你编写的代码不需要关注底层逻辑。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
 
//js
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 world!"
    }
});

4、组件化应用构建 一个组件本质上是一个拥有预定义选项的一个 Vue 实例。 属性能够将数据从父作用域传到子组件。

<div id="app-7">
    <ol>
        <todo-item
            v-for="item in items"
            v-bind:todo="item"
            v-bind:key="item.id">
        </todo-item>
    </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});
var app7 = new Vue({
  el: '#app-7',
  data: {
    items: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其他什么人吃的东西' }
    ]
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 14、商品分类等模块及flex布局

    这是这本章节的重点,大家可以看到在我的页面基本布局中大量使用了flex布局,所以我觉得这个很重要。 (1)这是对flex的语法总结的一份思维导图,大家可以看看

    Ewall
  • vue实例-vue官网学习笔记

    1、构造器 ①每个vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的:

    Ewall
  • 读《解读中国经济》— 近代的屈辱与社会主义革命

        在1840年,也就是工业革命发生不到一百年,中国就在与英国的鸦片战争中战败,接下来一系列的战争中接连受到战败的屈辱,中英战争、中法战争、中日战争、八国联...

    Ewall
  • 再看Android官方文档之Fragment&数据保存

    子勰
  • Appium自动化(11) - 详解 Applications 类里的方法和源码解析

    https://www.cnblogs.com/poloyy/category/1693896.html

    小菠萝测试笔记
  • 尤雨溪:重头来过的 Vue 3 带来了什么?

    在过去的一年里,Vue团队一直在开发Vue.js的下一个主要版本Vue 3,我们希望能在2020年上半年将其发布(在撰写本文时,这项开发工作正在进行中)。

    前端达人
  • Web前端-Vue.js必备框架(一)

    什么是Vue.js?是目前最火的框架,React是最流行的框架,打包工具Webpack,目前三大主流Vue.js,Angular.js,React.js框架。

    达达前端
  • 福爆 | 博客升级 .NET Core 3.0 又踩一坑

    昨天刚发了一篇《与时俱进 | 博客现已运行在 .NET Core 3.0 及 Azure 上》得瑟,本以为踩完了坑,结果晚上博客又爆了。Azure Applic...

    Edi Wang
  • 「中文翻译」Vue3 的诞生之路

    因时间有限,文中翻译不对的地方还请指出,望海涵。想感受原汁原味还请移步上方链接。致敬尤大!

    童欧巴
  • 微信中通过页面(H5)直接打开本地app的解决方案

    简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的。 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你...

    Java中文社群-磊哥

扫码关注云+社区

领取腾讯云代金券