vue整个页面不能编辑
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue整个页面不能编辑相关的知识，希望对你有一定的参考价值。
原因是由于受javascript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化，针对这个问题今天遇到的，通过v-if控制标签切换效果，出现没任何反应的情况。检测数据正常，只是页面没有渲染。
查了很多资料因为数据层次太多，render函数没有自动更新，需手动强制刷新。 参考技术A 比较先进的方法是在body体内加个div,设置其style的index值最大,比如9999,结合css和div技术可以实现当前页面上浮一个透明层,这样用户就不能操作..
Vue初识
Vue框架
# Angular React Vue
?
# js渐进式框架：一个页面小到一个变量，大到整个页面，均可以有vue控制，vue也可以控制整个项目
?
# 思考：vue如何做到一次引入控制整个项目 => 单页面应用 => vue基于组件的开发
# vue的工作原理：vue如何渲染一个页面
# vue的组件概念
# vue路由的概念
# vue的ajax概念(axios)
# 学习曲线：vue的指令 vue的实例成员 vue组件 vue项目开发
Vue的优点
"""
1.单页面：高效
2.虚拟DOM：页面缓存
3.数据的双向绑定：数据是具有监听机制
4.数据驱动：从数据出发，不是从DOM出发
"""
Vue的使用
"""
1.下载vue.js：https://vuejs.org/js/vue.js
2.在要使用vue的html页面通过script标签引入
3.在html中书写挂载点的页面结构，用id表示
4.在自定义的script标签实例化Vue对象，传入一个大字典
5.在字典中通过 el与挂载点页面结构绑定，data为其提供数据
"""
vue完成简单的事件
<div id="app">
<h1 v-on:click="clickAction">h1的内容是 msg </h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el: ‘#app‘,
data:
msg: ‘vue渲染的内容‘
,
methods: // 为挂载点提供事件的
clickAction: function ()
alert(123)
)
</script>
vue操作简单样式
<div id="app">
<p v-on:click="btnClick" v-bind:style="v_style">点击p文字颜色变为绿色</p>
<div v-on:click="btnClick" v-bind:style="v_style">点击div文字颜色变为绿色</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el: ‘#app‘,
data:
v_style:
color: ‘black‘
,
methods:
btnClick: function ()
this.v_style.color = ‘green‘
)
</script>
小结
"""
1.vue通过 v-* 指令来控制标签
2.vue通过 变量 来驱动页面
"""
指令
文本指令
<div id="app">
<!-- 插值表达式就是 v-text -->
<p> msg1 </p>
<p v-text="msg2"></p>
<!-- 可以解析html标签 -->
<p v-html="msg3"></p>
<!-- 必须赋初值，渲染的结果永远不会发生改变 -->
<p v-once="msg3" v-on:mouseover="action"> msg3 </p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el: ‘#app‘,
data:
msg1: ‘**msg1**‘,
msg2: ‘<b>**msg2**</b>‘,
msg3: ‘<b>**msg3**</b>‘,
,
methods:
action: function ()
// var msg = this.$data.msg4;
this.msg3 = ‘<i>**new msg3**</i>‘
)
</script>
事件指令
<div id="app">
<!-- v-on:事件名="函数名" 可以简写为 @事件名="函数名" （v-on: => @）-->
<p v-on:click="action1"> msgs[0] </p>
<p @click="action2"> msgs[1] </p>
?
<!-- 事件的传参 -->
<ul>
<li @click="liAction(100)">列表项1</li>
<li @click="liAction(200)">列表项2</li>
<li @click="liAction(300)">列表项3</li>
</ul>
?
<!-- 鼠标事件的对象：直接写函数名，默认将鼠标事件对象传入 -->
<div @click="func1">func1</div>
<!-- 鼠标事件的对象：一旦添加(),就必须手动传参，$event就代表鼠标事件对象 -->
<div @click="func2($event, ‘abc‘)">func2</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el: ‘#app‘,
data:
msgs: [‘11111‘, ‘22222‘]
,
methods:
action1: function ()
alert(this.msgs[0])
,
action2: function ()
alert(this.msgs[1])
,
liAction: function (num, msg)
console.log(num, msg)
,
func1: function (ev)
console.log(ev)
,
func2: function (ev, msg)
console.log(ev);
console.log(msg)
)
</script>
属性指令
<div id="app">
<!-- 属性指令：用vue绑定属性，将属性内容交给vue处理 -->
<!-- 语法：v-bind:属性名="变量" (v-bind: 可以简写为 :) -->
<p class="" style="" v-bind:owen="oo" :jason="jj"></p>
?
?
<!-- class 属性 -->
<p :class="c1" @click="action1"></p>
<!-- 多类名 -->
<p :class="[c1, c2]"></p>
<!-- ‘br‘ 固定写死的数据，不再是变量 -->
<p :class="[c1, ‘br‘]"></p>
?
<!-- style 属性 -->
<!-- 一个变量：该变量值为,内部完成一个个属性的设置 -->
<p class="gDiv" :style="s1">12345</p>
<!-- 一个：内一个个属性有一个个变量单独控制 -->
<p class="gDiv" :style="fontSize: fs, color: c">67890</p>
?
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el: ‘#app‘,
data:
oo: ‘Owen‘,
jj: ‘Jason‘,
c1: ‘rDiv‘,
c2: ‘br‘,
s1:
// ‘font-size‘: ‘30px‘
fontSize: ‘30px‘,
color: ‘pink‘
,
fs: ‘20px‘,
c: ‘orange‘
,
methods:
action1: function ()
if (this.c1 == ‘rDiv‘)
this.c1 = ‘gDiv‘
else
this.c1 = ‘rDiv‘
)
</script>
条件指令
<meta charset="UTF-8">
<style>
.div
width: 100px;
height: 100px;
background-color: greenyellow;
border-radius: 50%;
</style>
<div id="app">
<!-- 条件指令 v-show | v-if-->
<!-- v-show：消失是以 display: none渲染 -->
<div class="div" v-show="s1"></div>
<div class="div" v-show="s1"></div>
<!-- v-if：消失时不会被渲染渲染，所以建议建立缓存, 用key属性 -->
<div class="div" v-if="s2" key="div1"></div>
<div class="div" v-if="s2" key="div2"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue(
el: ‘#app‘,
data:
s1: false,
// s2: false 没写默认为false
)
</script>
<meta charset="utf-8">
<style>
ul li
border: 1px solid black;
width: 60px;
float: left;
ul
list-style: none;
ul:after
content: "";
display: block;
clear: both;
.wrap
width: 500px;
height: 200px;
.red background-color: red;
.blue background-color: blue;
.green background-color: green;
</style>
<div id="app">
<!-- v-if v-else-if v-else 案例 -->
<ul>
<li @click="changeWrap(0)">red</li>
<li @click="changeWrap(1)">green</li>
<li @click="changeWrap(2)">blue</li>
</ul>
<!-- red页面逻辑结构 -->
<div class="wrap red" v-if="tag == 0" key="aaa"></div>
<!-- green页面逻辑结构 -->
<div class="wrap green" v-else-if="tag == 1" key="bbb"></div>
<!-- blue页面逻辑结构 -->
<div class="wrap blue" v-else key="ccc"></div>
<!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
<!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
new Vue(
el: "#app",
data:
tag: 0,
,
methods:
changeWrap (num)
this.tag = num;
)
</script>
vue的工作原理
以上是关于vue整个页面不能编辑的主要内容，如果未能解决你的问题，请参考以下文章