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

相关文章

来自专栏hightopo

基于 HTML5 Canvas 的属性值点击出现多选项的制作

15420
来自专栏向治洪

Markdown对应Yelee主题语法

概述 这里说的是Yelee主题的语法和原生语法是有些区别的;更多的基础语法可以到Cmd Markdown上面去查看;但是我觉得都会各有不同吧 注意这里说的不是真...

20460
来自专栏菜鸟计划

我的HTML总结之常用基础便签

HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言。 HTM...

39350
来自专栏超然的博客

CSS 居中

给父元素设置float,然后父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实...

12310
来自专栏有趣的django

20.DOM

定义 文档对象模型(Document Object Model)是一种用于HTML和XML文档的编程接口。 查找元素 1.直接查找 document.getEl...

35450
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

7820
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

24200
来自专栏漫漫全栈路

jQuery Cheat—Sheet(jQuery学习笔记)

jQuery Cheat—Sheet(jQuery学习笔记) Web前端学习笔记之——jQuery学习笔记 ---- 什么是jQuery? jQuery是一种...

39130
来自专栏从零开始学 Web 前端

从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

JavaScript 开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

9840
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(二)对样式的操作,获取元素的方式

14440

扫码关注云+社区

领取腾讯云代金券