介绍-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 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

React.JS一点通

10720
来自专栏知晓程序

开发 | 小程序也能像朋友圈一样「折叠全文」?有了这个技巧就能做!

之前做小程序开发时,需要实现对多行文本进行的折叠的效果(类型微信朋友圈)。主要交互有三点:

19750
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:升学篇

上一篇《包学会之浅入浅出Vue.js:开学篇》中,我们初步了解单页面组件这个概念,现在通过一个项目,来进一步解析组件的应用吧。

35.1K400
来自专栏前端知识铺

将你的 Virtual dom 渲染成 Canvas

一个基于Vue的virtual dom插件库,按照Vue render 函数的写法,直接将Vue生成的Vnode渲染到canvas中。支持常规的滚动操作和一些基...

26540
来自专栏木子墨的前端日常

vue中mixin的一点理解

  vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixin...

27020
来自专栏LEo的网络日志

markdown学习

46180
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。 当更新项目的...

27030
来自专栏无原型不设计

怎样使用原型设计中的组件样式功能

“样式”是一个集中管理你整个项目的页面和部件的外观和感受的解决方案。可以把它理解为微软Office Word中的样式,或修饰HTML的CSS样式。

1.2K180
来自专栏hightopo

基于 HTML5 WebGL 的 3D SCADA 主站系统

21030
来自专栏知晓程序

开发 | 一篇文章读懂微信小程序视图层

13620

扫码关注云+社区

领取腾讯云代金券