Vue入门

一、引入vue

方法一:下载vue.js,然后像引用jquery一样,在HTML中使用script标签引入

<script src="https://unpkg.com/vue/dist/vue.js"></script>

方法二:使用架构工具,推荐使用npm安装后,然后可以直接用作 AMD 模块

var Vue = require('Vue');

二、声明式渲染

hello World实例(新建html将如下内容放在body中)

<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>var app = new Vue({
    el: '#app',
    data: {message: 'Hello Vue!'}
})
</script>

除了绑定插入的文本内容,我们还可以采用这样的方式将数据绑定到 DOM 元素的属性

<div id="app-2">
  <span v-bind:title="message">Hover your mouse over me to see my title!</span>
  <!-- v-bind被称为指令,指令带有前缀 v-,以表示它们是 Vue.js 提供的特殊属性 v-bind:变量=‘数据’-->
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {message: 'You loaded this page on ' + new Date()}
})

三、条件

<div id="app-3"><p v-if="seen">Now you see me</p></div><!-- v-if 条件指令,v-if=‘数据(布尔值)’-->
var app3 = new Vue({
  el: '#app-3',
  data: {seen: true}//设置为false时,P元素不渲染
})

四、循环

<ol id="app-4"><li v-for="todo in todos">{{ todo.text }}</li></ol><!-- v-for 循环指令,v-for=‘列表项 in 数组数据’-->
var app4 = new Vue({
  el: '#app-4',
  data: {todos:[{text: 'Learn JS'},{text:'Learn Vue'},{text: 'Build something awesome'}]}
 //app4.todos.push({text:'New item'})会新增列表项
})

五、用户输入

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button><!-- v-on绑定事件指令,v-on:事件类型=‘调用函数’ -->
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {message: 'Hello Vue.js!'},
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

六、数据绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message"><!-- v-model数据绑定指令 v-model=‘绑定的数据’-->
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {message: 'Hello Vue!'}
})

七、组件

<ol>
  <todo-item></todo-item><!--自定义组件-->
</ol>
Vue.component('todo-item', {//定义一个组件
  props: ['todo'],//将数据从父作用域传到子组件
  template: '<li>{{ todo.text }}</li>'
})

以下有数据传递的组件

<ol id="app-7">
  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
  <!--先循环从groceryList数组中分别获取列表项为item,将item赋值给todo分别传递给子组件-->
</ol>
Vue.component('todo-item', {
  props: ['todo'],//子元素通过props接口实现与父元素的数据传递
  template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
  el: '#app-7',
  data: {groceryList: [{ text: 'Vegetables' },{ text: 'Cheese' },{ text: 'Whatever' }]}
})

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5376
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2547
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5287
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3095
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2692
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4054
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

6758
来自专栏杨龙飞前端

scrollto 到指定位置

2494
来自专栏一个会写诗的程序员的博客

Spring Reactor 项目核心库Reactor Core

Non-Blocking Reactive Streams Foundation for the JVM both implementing a Reactiv...

2142

扫码关注云+社区