zoukankan      html  css  js  c++  java
  • Vue起步

    1. 兼容性

    Vue不兼容IE8以及以下。

    Vue Devtools

    https://github.com/vuejs/vue-...

    2. 安装

    1.直接<script>标签引用, Vue会被注册成为一个全局变量。
    2.npm
    注:开发版本下不要使用压缩版本,不然会失去一些错误相关的警告。

    起步

    vue是一套构建用户界面的渐进式框架。vue被设计为可以自底向上逐层应用,vue的核心只关注视图层,

    3. 声明式渲染 {{ text }}/v:bind

    Vue的核心是允许采用简洁的模板语法来声明式的将数据渲染进DOM系统:

    &lt;div&gt;
    {{ message }}
    &lt;/div&gt;
    

    如上,数据和DOM已经建立了关联,所有东西都是响应式的。

    &lt;p v-bind:title="message"&gt;鼠标悬停几秒&lt;/p&gt;
    

    如上,采用指令的形式应用在已经渲染的DOM上面,而且给DOM应用特殊的响应式行为。这里是将"message"绑定到p元素的title属性上面。

    条件与循环 v-if/v-for

    &lt;p v-if="seen"&gt;现在可以看到我了么?&lt;/p&gt;
    

    v-if不仅可以把数据绑定到DOM文本或特性,还可以绑定到DOM结构。

    &lt;ul&gt;
        &lt;li v-for="todo in todos"&gt; {{ todo.text }} &lt;/li&gt;
    &lt;/ul&gt;
    

    如上,v-for可以渲染一个列表。

    处理用户输入v-on/v-model

    可以使用v-on指令添加事件监听器。

    &lt;button v-on:click="reverseHandle"&gt;click Me&lt;/button&gt;
    

    v-model可以实现表单和应用状态之间的双向绑定。

    &lt;input v-model="message"&gt;
    

    组件化应用构建

    Vue里面,一个组件本质上是一个拥有预定义选项的一个Vue实例。在Vue中注册组件很简单:

    Vue.component('todo-item', {
        props: ['todo'] //接受一个props, 类似一个自定义特性。这个props名为todo
        template: '&lt;li&gt;{{ todo.text }}&lt;/li&gt;'
    })
    
  • 相关阅读:
    [LeetCode]Sliding Window Maximum
    判断两根线段是否相交
    求幂,我居然又没做出来
    C++集合运算函数总结 & 需要有序集合的操作
    effective stl读书笔记 & stl里面提供的算法 & emplace & ostream_iterator
    利用位操作的几道题目
    C++的new_handler
    TCP的可靠性 窗口滑动 拥塞控制
    关于高性能网络编程的一些知识
    三种连接 & DOS & SYNFLOOD & 防御
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9900905.html
Copyright © 2011-2022 走看看