vue基础实践1-VUE的指令
VUE的指令：directive
1.都是按照v-xxx处理的，它是规定给元素设置的自定义属性
2.当vue加载成功并进行处理的时候，会按照相关的规则解析和渲染视图，遇到对应的指令实现对应的功能。
v-model 一般给表单元素设置的，实现表单元素和数据之间的相互绑定
1）先把数据绑定表单元素一般把数据赋值给表单元素的value
2）监听表单元素的内容改变
3）内容改变后，会把对应的数据也改变
4）对应的数据改变，视图中所有用到的数据的地方都会重新渲染视图 <=> 数据
在vue框架中给表单元素设置value等属性是没有意义的
v-html/v-text : 给非表单元素设置内容，v-html支持对于标签的自动识别，v-text会把所有的内容分都当成文本
传统的胡子语法，在vue没有加载完成之前，会把{{xxx}}展示在页面中，当vue加载完成会把真正的内容，这样的体验不好
v-bind:给元素的内置属性动态绑定数据，例如给img绑定动态图片路径地址,简写：v-bind 等价于:src
v-once: 绑定的数据是一次性的后面不论数据怎么改变，视图也都不会重新渲染
vue和react操作流程：
准备视图
准备实例 new Vue 和data
1）.看那些东西是写死的，那些东西是需要动态绑定的，那么都以数据结构的模式放进data
2）.看按照 v-与胡子语法相互绑定和关联
3）.改变数据->视图一定重新渲染
v-show与v-if控制元素的有无，区别是：
v-if：如果对应的值是TRUE，当前元素会在结构中显示，如果是false，当前元素会在结构中移除（它控制的是加载和卸载的操作 =>DOM的增加和删除）；还有对应的v-else-if / v-else等指令。
+ v-if 是控制组件存不存在，对于结果是false，不存在的组件来说，视图渲染的时候无需渲染这部分内容，而v-show则不行，因为不管是显示和隐藏，结构都在，所以视图显然的时候这部分也要渲染。
+ 过于频繁的切换操作中，v-if明显比v-show要低一些
v-show：它控制元素的样式的显示和隐藏（display的操作）
<!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>
</head>
<body>
<!-- VUE的指令：directive
1.都是按照v-xxx处理的，它是规定给元素设置的自定义属性
2.当vue加载成功并进行处理的时候，会按照相关的规则解析和渲染视图，遇到对应的指令实现对应的功能。
v-model 一般给表单元素设置的，实现表单元素和数据之间的相互绑定
1）先把数据绑定表单元素一般把数据赋值给表单元素的value
2）监听表单元素的内容改变
3）内容改变后，会把对应的数据也改变
4）对应的数据改变，视图中所有用到的数据的地方都会重新渲染视图 <=> 数据
在vue框架中给表单元素设置value等属性是没有意义的
v-html/v-text : 给非表单元素设置内容，v-html支持对于标签的自动识别，v-text会把所有的内容分都当成文本
传统的胡子语法，在vue没有加载完成之前，会把{{xxx}}展示在页面中，当vue加载完成会把真正的内容，这样的体验不好
v-bind:给元素的内置属性动态绑定数据，例如给img绑定动态图片路径地址,简写：v-bind 等价于:src
v-once: 绑定的数据是一次性的后面不论数据怎么改变，视图也都不会重新渲染
vue和react操作流程：
准备视图
准备实例 new Vue 和data
1）.看那些东西是写死的，那些东西是需要动态绑定的，那么都以数据结构的模式放进data
2）.看按照 v-与胡子语法相互绑定和关联
3）.改变数据->视图一定重新渲染
v-show与v-if控制元素的有无，区别是：
v-if：如果对应的值是TRUE，当前元素会在结构中显示，如果是false，当前元素会在结构中移除（它控制的是加载和卸载的操作 =>DOM的增加和删除）；还有对应的v-else-if / v-else等指令。
+ v-if 是控制组件存不存在，对于结果是false，不存在的组件来说，视图渲染的时候无需渲染这部分内容，而v-show则不行，因为不管是显示和隐藏，结构都在，所以视图显然的时候这部分也要渲染。
+ 过于频繁的切换操作中，v-if明显比v-show要低一些
v-show：它控制元素的样式的显示和隐藏（display的操作）
-->
<div id="app">
<!-- <input type="text" v-model="msg">
<span v-html='msg'>{{msg}}</span>
<span>{{msg}}</span> -->
<!-- <img v-bind:src="pic" alt=""> -->
<!-- <span v-html='msg'></span>
<span v-once v-html='msg'></span> -->
<button v-html='as' @click='handle'>隐藏图片</button>
<br>
<img v-bind:src="pic" alt="" v-if='show'>
</div>
</body>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
msg:'前端学习',
pic:'1.jpg',
//图片显示和隐藏的控制=>这里的数据最后都会作为实例的属性挂载在实例上vm.show...
as:'隐藏图片',
show:true,
},
methods: {
handle() {
//this:vm 每次点击切换true和false，从true改为false，从false改为true -> this.show = !this.show;
this.show = !this.show;
this.as=this.show?'隐藏图片' : '显示图片';
}
}
});
// setTimeout(() => {
// vm.msg='基础必须'
// },1000);
</script>
运行结果如下：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
