<div id="vue_det">                     //使改动全部在指定的 div 内,div 外部不受影响
<h1>site : {{site}}</h1>  
<h1>url : {{url}}</h1>        // {{ }} 用于输出对象属性和函数返回值,这里应该是输出对象?
    <h1>{{details()}}</h1> 
</div>
<script type="text/javascript">   //数据对象 
    var vm = new Vue({      //实例化vue?????   
    el: '#vue_det',        //对应上方<div id="vue_det",也是一种id????>
    data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" },   

//data 用于定义属性,实例中有三个属性分别为:site、url、alexa
    methods: {                             //methods 用于定义的函数,可以通过 return 来返回函数值 
    details: function() {                // {{ }} 用于输出对象属性和函数返回值 ,这里应该是函数返回值?
    return this.site + " - 学的不仅是技术,更是梦想!"; } } })
</script>    //这里等价于"
菜鸟教程- 学的不仅是技术,更是梦想!" 好家伙
                             //return一下把data返回一下,不让就白打了,

第五篇:vue.js起步的更多相关文章

  1. Vue.js起步

    Vue.js是一套构建用户界面的 渐进式框架,Vue 采用自底向上增量开发的设计,Vue 的核心库只关注视图层.Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用. V ...

  2. Vue.js 起步

    通过实例来看下 Vue 构造器中需要哪些内容 测试时这段代码我直接写在index.html中 <!DOCTYPE html> <html> <head> <m ...

  3. 第六篇:vue.js模板语法(,属性,指令,参数)

    Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.( ...

  4. 第十篇:vue.js for循环语句(大作业进行时)

    Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...

  5. 第十一篇:vue.js监听属性(大作业进行时)

    这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...

  6. Vue.js官方文档学习笔记(一)起步篇

    Vue.js起步 Vue.js介绍 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库 ...

  7. Vue.js:起步

    ylbtech-Vue.js:起步 1.返回顶部 1. Vue.js 起步 每个 Vue 应用都需要通过实例化 Vue 来实现. 语法格式如下: var vm = new Vue({ // 选项 }) ...

  8. Vue.js 2.0 学习重点记录

      Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...

  9. 公司内部技术分享之Vue.js和前端工程化

    今天主要的核心话题是Vue.js和前端工程化.我将结合我这两年多的工作学习经历来谈谈这个,主要侧重点是前端工程化,Vue.js侧重点相对前端工程化,比重不是特别大. Vue.js Vue.js和Rea ...

随机推荐

  1. Javaweb-pom文件

    pom.xml是maven的核心配置文件 <?xml version="1.0" encoding="UTF-8"?> <!--maven版本 ...

  2. sql-DQL-多表联查

    多表查询 笛卡尔积 左表的每条数据和右表的每条数据组合,这种效果称为笛卡尔乘积 select * from emp, dept; 笛卡尔积引入了很多无用的数据,要完成多表查询,需要设置过滤条件来消除无 ...

  3. Python爬虫常用:谷歌浏览器驱动——Chromedriver 插件安装教程

    我们在做爬虫的时候经常要使用谷歌浏览器驱动,今天分享下这个Chromedriver 插件的安装方法. 第一步:打开谷歌浏览器打开设置面板 嫌枯燥的小伙伴可以点击此处找管理员小姐姐领取免费资料 第二步: ...

  4. 动态树 — Euler_Tour_Tree

    一般提到动态树,我们会不约而同的想到 LCT,这算是比较通用,实用,能力较为广泛的一种写法了.当然,掌握 LCT 就需要熟悉掌握 Splay 和各种操作和知识.ETT(中文常用称呼:欧拉游览树)是一种 ...

  5. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  6. 一文解析Pinia和Vuex,带你全面理解这两个Vue状态管理模式

    Pinia和Vuex一样都是是vue的全局状态管理器.其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia. 本文将通过Vue3的形式对两者的不同实现方式进行 ...

  7. 不是第七代的 Win 7

    贡献者:历史上的今天 Windows 7 是由微软公司(Microsoft)2009 年 10 月 22 日发布的桌面端操作系统,它影响了每个行业的方方面面,以至于很多人仍然在日常生活和工作中使用它. ...

  8. WPF 实现用户头像选择器

    制作一个用户头像选择器仿 WeGame 制作一个用户头像选择Canvas为父控件所实现,展示图片使用Image,Path当作上方的蒙版; Canvas:主要用途方便移动Image,设置ClipToBo ...

  9. TCP/IP协议三次握手、四次断开

    1.tcp报文格式 1行代表一个字节: 第一行:代表源端口和目的端口,分别占16位: 第二行:32位序列号:表示客户端向服务端发送的报文的序号是多少,这个序号是计算机随机生成的一个代表该报文的唯一标示 ...

  10. JAVA基础-11-Java Number 类--九五小庞

    问题:一直有疑惑,为什么java中学习了基本数据类型,而不使用,使用的是封装的对象. 解答: 一般地,当需要使用数字的时候,我们通常使用内置数据类型,如:byte.int.long.double 等. ...