`<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> (适合初学者)
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
{{ message }}
<h3>{{student.name}}</h3>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
student:{
name:'hello',
age:'11'
},
score:[11,12,3]
}
})
</script>
</body>
</html>
<div id="app">
<h3 v-text="student.name"></h3>
</div>
<div id="app">
<h3 v-text="content"></h3>
<h3 v-html="content"></h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
content:"<a href='www.baidu.com'>百度</a>"
}
})
</script>
<div id="app">
<input type="button" value="点击" v-on:click="doIt"/>
<input type="button" value="双击点击" v-on:dblclick="doIt"/>
<input type="button" value="简写双击点击" @dblclick="doIt"/>
<h1 v-on:click="changevalue">{{ name }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app=new Vue({
el:'#app',
data:{
name:'名字:'
},
methods:{
doIt:function(){
alert("触发了点击事件!");
},
changevalue:function(){
this.name+='1';
}
}
})
</script>
v-on补充:
事件绑定的方法写成函数调用的形式,可以传入自定义的参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上。修饰符框架对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种
v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素的值相关联
绑定的数据是双向绑定
<div id="app">
<button @click="sub">-</button>
<span>{{ num }}</span>
<button @click="add">+</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
add: function() {
if (this.num < 10) {
this.num++;
} else {
alert("已经是最大的了,不能再加了!");
}
},
sub: function() {
if (this.num > 0) {
this.num--;
} else {
alert("已经是最小的了,不能再减了!");
}
}
}
});
</script>
<div id="app">
<input type="text" v-model="value" @keyup.enter="add" />
{{ value }}
<ul v-if="list.length!=0">
<li v-for="(item ,index) in list">
{{ index+1}}.{{item }}<button @click="del(index)">删除</button>
</li>
<label>{{list.length}}</label><button @click="clean">清空</button>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
value: '111',
list: ['Java', 'Css', 'Html']
},
methods: {
add: function() {
this.list.push(this.value);
},
del: function(index) {
alert(index);
this.list.splice(index, 1);
},
clean: function clean() {
this.list = []
}
}
})
</script>
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。