介绍-vuejs官网学习笔记-阿里云开发者社区

开发者社区> 开发与运维> 正文

介绍-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: '随便其他什么人吃的东西' }
    ]
  }
})

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章