Vue Hello world
现在我们来写一个vue的HelloWord
代码如下:
<div id="app"><!--绑定vue对象中的mesage对象--><h1>{{message}}</h1>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
<script type="text/javascript">
//定义一个vue对象
var vm = new Vue({//绑定Dom对象idel : '#app',data: {message : 'Hello world, I am Vue.js' //定义vm.message对象}
});
</script>
运行结果:Hello world, I am Vue.js
vm.message的值可以随着随着文本框中的值而改变,而无需我们手动去获取文本框的值到再赋值给vm.message对象。
代码如下:
<div id="app"><h1>Your input is {{ message }}</h1><input type="text" v-model="message">
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>
<script type="text/javascript">
var Message = Vue.extend({ props : ['content'],template : '<h1>{{content}}</h1>'
})Vue.component('message', Message);
var vm = new Vue({el : '#app',
})
</script>
运行结果:
Your input is vue
vue |
Vue Hello world相关推荐
- canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
- vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本 建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
- 前端Vue学习之路(五)插件的使用
vant插件使用 这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话 找到package.json文件 添加以下内容 plugins:[['import', ...
- 前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识 假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动 所以封装 ...
- 前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...
- 前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言 先安装node.js环境 ...
- Vue 自定义权限指令
前述 虽然VUE 定义了一些常用的指令,例如v-on.v-bind等,但是在我们实际开发的时候,还是会自己定义一些指令用于适应我们自己的业务. 实现 这里由于我的项目做了动态权限,页面的按钮也需要根据 ...
- vue响应式给数组中的对象添加新属性
需要使用到vue的全局api $set(item,'newParam','value')方法 group: [ // 对象数组{ id: '1', name: '任务1' ,disable: fals ...
- Vue生命周期函数详解
生命周期图 生命周期方法 var vm = new Vue({el: '#app',data: {msg:'ok'},methods: {show:function () {console.log(& ...
最新文章
- lstm timestep一般是多少_请问rnn和lstm中batchsize和timestep的区别是什么?
- 调用本地html_requests-html:最简单的爬虫框架,看完你就会了
- Gulp:插件编写入门
- Android命令行工具logcat详细用法!
- android 沉浸式导航栏
- 编译原理实验(算符优先文法)
- java正则过滤特殊字符
- 单链表删除所有值为x的元素_线性表之单链表
- 癌中之王:基质微环境塑造胰腺癌瘤内结构|Cell
- UVA-10791 数学
- 学习之法 —— 如何阅读代码、如何编写代码
- MySQL连接问题 --- (1251:Client does not support ...)
- 《Java练习题》Java编程题合集(转载)
- G950U破解电信4G正确姿势
- 数学建模案例【人口模型 】(马尔萨斯人口模型,Logistic模型)
- Flash 第九章 运动补间动画
- JAVA小乌龟游泳_描写乌龟游泳的作文
- Linux.2- shell命令(部分)
- ASP.NET MVC5中局部视图的更新
- 华为手机文档里的html,华为手机如何扫描文件变成文档 这扫描功能简直太好用了...
热门文章
- 学习做视频剪辑,几分钟教会你剪辑技巧
- 关于计算机网络实训室的申请书,计算机网络技术综合实训室建设方案.doc
- 以完整解决方案引领智慧转型,联想在深发布ThinkSystemThinkAgile双品牌新品
- Casbin get-users 账号密码泄漏漏洞
- Go开发之如何破解安装GoLand编译器?
- linux 磁盘分区的原理,linux磁盘—分区原理
- 利用哈希技术统计C源程序关键字出现频度
- ActionEnglish Notes
- BUUCTF笔记之Real部分WP(一)
- 计算机外设配件的主要相关参数有哪些,举例说明计算机外设主要有哪些设备?...