vue入门 0 小demo (挂载点、模板、实例)
2024-09-05 03:46:21
vue入门 0 小demo (挂载点、模板)
用直接的引用vue.js
首先 讲几个基本的概念
1、挂载点即el:vue 实例化时 元素挂靠的地方。
2.模板 即template:vue 实例化时挂载点 下赋值的模板。
3.赋值时 的符号 有 插值表达式 {{msg}} 、 v-text="msg" 、v-html="msg" 类似于css 的写法
4.实例 即数据:data:{msg:'hello world!'}
4.事件表示:v-on:click="handleclick" ,vue 指令点击时的方法handleclick, v-on:click 简写@click
methods: { handleclick:function () { this.msg='world';} }
5. 属性绑定 v-bind 简写:bind or : v-bind:title="title1"
下面为代码
效果为:显示 hello world ,点击时 变为world
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/vuejs/vue.js"></script> </head>
<body>
<div id="app"> <!--挂载点-->
<!-- <p>{{msg}}</p> --><!--模板--> <!--{{msg}} 为插值表达式 == v-text='msg' v-html="msg"-->
<!-- <p v-text="msg"></p> -->
<!-- <p v-html="msg"></p> -->
<div v-on:click="handleclick">{{msg}}</div>
</div>
</body>
<script>
new Vue({
el:'#app',
// template:'<p>{{msg}}</p>',
data:{
msg:'hello world!'
},
methods: {
handleclick:function () {
this.msg='world';
}
},
});
</script>
</html>
02属性和双向绑定
知识点:v-bind:title 、v-model
显示效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/vuejs/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <div title="this is hello world">{{msg}}</div> -->
<!-- <div title="this is hello world">{{msg}}</div> -->
<div v-bind:title="title1">{{msg}}</div> <!--数据项属性绑定 :bind=v-bind: -->
<div :title="title">{{msg}}</div> <!--数据项属性绑定 :bind=v-bind: -->
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:'#app',
template:'',
data:{
msg:'hello world',
title1:'this is hello world',
content:'世界你好!'
},
methods: { },
});
</script>
</body>
</html>
最新文章
- html 标签
- delay(和setTimeout()的区别
- AVFoundation播放视频时显示字幕,切换音轨
- 如何查看SQL Server的版本、补丁包信息?以及如何鉴别是否需要升级自己的SQL Server?
- HYSBZ 2243
- 编绎openssl杂记(window)
- 二十四种设计模式:适配器模式(Adapter Pattern)
- PhotoSwipe简介(PhotoSwipe是一个适合在触摸屏手机上使用的相册展示包)
- HTTP DNS小结
- js时间字符串转Date对象
- javascript点击焦点图
- Memcached for windows x64 x32 安装
- Stanford Local 2016 G ";Ground Defense";(线段树)
- me 云面试
- 艾妮记账本Web开发(开发版)
- pandas中的空值处理
- javascript 小清新颜色翻页效果
- Fiddler抓包8-打断点(bpu)
- 【git】之分支管理
- chrome主页被篡改为360导航之解决方式