<html>

<body>

<div id="app">

  {{ message }}

</div>

<div id="app-2">

<span v-bind:title="message">

    鼠标悬停几秒钟查看此处动态绑定的提示信息！

  </span>

</div>

<div id="app-3">

  <p v-if="seen">现在你看到我了</p>

</div>

<div id="app-4">

  <ol>

    <li v-for="todo in todos">

      {{ todo.text }}

    </li>

  </ol>

</div>

<div id="app-5">

  <p>{{ message }}</p>

  <button v-on:click="reverseMessage">逆转消息</button>

</div>

<div id="app-6">

  <p>{{ message }}</p>

  <input v-model="message">

</div>

<div id="app-7">

  <ol>

    <!--

      现在我们为每个 todo-item 提供 todo 对象

      todo 对象是变量，即其内容可以是动态的。

      我们也需要为每个组件提供一个“key”，稍后再

      作详细解释。

    -->

    <todo-item

      v-for="item in groceryList"

      v-bind:todo="item"

      v-bind:key="item.id">

    </todo-item>

  </ol>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

<!-- 声明式渲染-->

var app = new Vue({

  el: '#app',

  data: {

    message: 'Hello Vue!'

  }

})

var app2 = new Vue({

  el: '#app-2',

  data: {

    message: '页面加载于 ' + new Date().toLocaleString()

  }

})

<!--条件与循环 -->

var app3 = new Vue({

  el: '#app-3',

  data: {

    seen: true

  }

})

var app4 = new Vue({

  el: '#app-4',

  data: {

    todos: [

      { text: '学习 JavaScript' },

      { text: '学习 Vue' },

      { text: '整个牛项目' }

    ]

  }

})

app4.todos.push({ text: '新项目' })

<!-- 处理用户输入-->

var app5 = new Vue({

  el: '#app-5',

  data: {

    message: 'Hello Vue.js!'

  },

  methods: {

    reverseMessage: function () {

      this.message = this.message.split('').reverse().join('')

    }

  }

})

var app6 = new Vue({

  el: '#app-6',

  data: {

    message: 'Hello Vue!'

  }

})

<!-- 组件化应用构建--->

<!-- todo-item  就是组件名称-->

Vue.component('todo-item', {

  props: ['todo'],

  template: '<li>{{ todo.text }}</li>'

})

var app7 = new Vue({

  el: '#app-7',

  data: {

    groceryList: [

      { id: 0, text: '蔬菜' },

      { id: 1, text: '奶酪' },

      { id: 2, text: '随便其它什么人吃的东西' }

    ]

  }

})

</script>

</body>

</html>

vue 基础核心学习的更多相关文章

  1. Vue 基础指令学习

    学习Vue的一些总结,第一次写博客,文笔实在是很差 不过我会不断写的. <template> <!--只能有一个根节点 --> <div> <pre> ...

  2. Vue基础知识学习（后端）

    ### Vue学习(后端) Vue安装 -引入文件安装,直接在官网下载vue.js引入项目中 -直接引用CDN -NPM安装(构建大型应用使用,在这不用) -命令行工具(构建大型单页应用,在这不用) ...

  3. Vue基础知识学习笔记

    一.环境搭建1.安装nodejs ((https://nodejs.org/en/)2.安装脚手架 npm install --global vue-cli /cnmp install --globa ...

  4. vue基础指令学习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. vue - vue基础/vue核心内容

    终于算是顺利进入vue了,确实也只有学了过后才知道,之前三过vue而不学,确实是对的,现在进来了一点都不后悔,ajax.node.js.promise.webpack.git等等确实是除了三大基础外还 ...

  6. vue - vue基础/vue核心内容（终结篇）

    今天是vue基础.vue核心内容第三天,也是最后一天,后面开始进入组件化学习,整个基础内容以生命周期的结束而结束,不得不说,张天禹把这节课讲活了,开始觉得vue是一个有生命的东西,包括前面所说的很多脏 ...

  7. Vue学习笔记-Vue基础入门

    此篇文章是本人在学习Vue是做的部分笔记的一个整理,内容不是很全面,希望能对阅读文章的同学有点帮助. 什么是Vue? Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式 ...

  8. 前端Vue基础学习

    Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...

  9. Vue学习系列(一)——初识Vue.js核心

    前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...

随机推荐

  1. 构建基于Javascript的移动web CMS入门——简单介绍

    看到项目上的移动框架,网上寻找了一下,发现原来这些一開始都有. 于是,找了个演示样例開始构建一个移动平台的CMS--墨颀 CMS,方便项目深入理解的同一时候.也能够自己维护一个CMS系统. 构建框架 ...

  2. Rabbitmq消息队列（二） Hello World! 模拟简单发送接收

    1.简介 RabbitMQ是消息代理:它接受和转发消息.你可以把它当作一个邮局:当你把你要邮寄的邮件放在信箱里时,你可以肯定Postman先生最终会把邮件送到你的收件人那里.在这个比喻中,Rabbit ...

  3. 硬件（MAC）地址的概念及作用

    概念:MAC地址就是在媒体接入层上使用的地址,也叫物理地址.硬件地址或链路地址,其被固化在适配器的ROM中. 可见MAC地址实际上就是适配器地址或适配器标识符.当某台计算机使用某块适配器后,适配器上的 ...

  4. Atitit. Toast alert loading js控件   atiToast v2新特性

    Atitit. Toast alert loading js控件   atiToast v2新特性 1. 连续多个txt追加的原理 var txt = document.createElement(& ...

  5. 解决js下跳转无referer的方法

    HTTP Header referer这玩意主要是告诉人们我是从哪儿来的,就是告诉人家我是从哪个页面过来的,可以用于统计访问本网站的用户来源,也可以用来防盗链.获取这个东西最好的方式是js,如果在服务 ...

  6. layui实现table表格的“关键字搜索”功能

    $('#searchBtn').on('click',function(){ var type = $(this).data('type'); active[type] ? active[type]. ...

  7. python学习代码

    #!/bin/python #example 1.1 #applay def function(a,b): print(a,b) def example1(): apply(function, (&q ...

  8. openWRT自学---如何开发新的用户态模块-helloworld

    以http://www.gargoyle-router.com/wiki/doku.php?id=openwrt_coding为参考文档 1.要获得openWRT的sdk环境.只要在Backfire的 ...

  9. E - Leading and Trailing 求n^k得前三位数字以及后三位数字，保证一定至少存在六位。

    /** 题目:E - Leading and Trailing 链接:https://vjudge.net/contest/154246#problem/E 题意:求n^k得前三位数字以及后三位数字, ...

  10. 如何居中div？

    如何居中div? 水平居中 1 //给div设置一个宽度,然后添加margin:0 auto属性 2 3 div{ 4 width:200px; 5 margin:0 auto; 6 } 让绝对定位的 ...