Vue学习
原创
Vue基础
vue简介
- JavaScript 框架
- 简化Dom操作
- 响应式的数据驱动
Vue导入
`<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> (适合初学者)
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>el介绍
<!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>- 作用范围：作用于el选项命中的标签内部
- 建议使用id选择器
- 适用于大多数双标签（html body不能）
数据对象
<!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>- Vue中用到的数据定义在data中
- data中科院写复杂的数据
- 渲染类型数据时，遵守js的语法即可
v-text
<div id="app">
<h3 v-text="student.name"></h3>
</div>- v-text指令的作用是：设置标签内容(textContent)
- 默认书法会替换全部内容，使用差值表达式{{}}可以替换指定内容
v-html
<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>- v-html:设置标签的innerHTML
- 内容中有html结构会解析为标签
- v-text指令无论是什么内容都会解析为文本
- 解析文本使用v-text，需要解析html结构使用v-html
v-on
<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指令的作用：是为元素绑定事件
- 事件名不需要写on
- 指令可以简写为@
- 绑定的方法定义在methods属性中
- 方法内部通过this关键字可以访问在data中的数据
v-show
- v-show 指令的作用：是根据真假切换元素的显示状态
- 原理的修改元素的display，实现显示隐藏
- 指令后面的内容，最终会解析为布尔值
- 值为tru元素显示，值为false元素隐藏
- 数据改变之后，对应元素的显示状态会同步更新
v-if
- v-if指令的作用是：根据表达式的真假切换元素的显示状态
- 本质是通过操作dom的元素来切换显示状态
- 表达式的值为true，元素存在于dom树中，为false时从dom树中移除
- 频繁的切换v-show，反之使用v-if的切换消耗小
v-bind
- v-bind指令的作用是：为元素绑定属性
- 完整的写法是v-bind:属性名
- 简写的话可以直接省略v-bind，只保留：属性名
- 需要动态的增删class建议使用对象的方式
v-for
- v-for指令的作用是：根据数据生成列表结构
- 数组经常和v-for结合使用
- 语法是(item,index) in数据
- item和index可以结合其他指令一起使用
- 数组长度的更新会同步到页面上，是响应式的
v-on补充
v-on补充：
事件绑定的方法写成函数调用的形式，可以传入自定义的参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上。修饰符框架对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种
v-mode
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>- 创建Vue示例时：el(挂载点)，data(数据)，methods(方法)
- V-on指令的作用是绑定事件，简写为@
- 方法中通过this，关键字获取data中的数据
- v-text指令的作用是：设置元素的文本值，简写为{{}}
- v-html指令的作用是：设置元素的innerHTML
记录本
<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>- 列表结构可以通过v-for指令结合数据生成
- v-on结合事件修饰符可以对事件进行限制，比如.enter
- v-on在绑定事件可以传入自定义参数
- 通过v-model可以快速的设置和获取表单元素的值
- 基于数据的开发方式
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录