<!--导入vue--> <script src="js/vue.js"></script> <script> new vue({ el:'ccs选择器' }) </script>
这样设置好了后这个vue中的内容会与对应的css选择器进行关联
注意点:
html差值部分页面
<h1>{{msg}}</h1>
vue部分代码
<script> new vue({ el:'h1' data:{ msg:'插入的信息' } }) </script>
注意点
:vue中的msg变量发生变化的再没其他约数条件下msg也会发送变化
<h2>{{msg|函数名}}</h2> h2标签内值为msg进过函数处理后的返回值
还是基于上述的html页面
<!--原html页面--> <h1>{{msg}}</h1> <!--进行约束设置,设置后一次性渲染,后面msg发送变化后里面内容不会发送改变--> <h1 v-once="msg">{{msg}}</h1> <h1 v-once="msg">{{msg+msg2}}</h1> <!--一次性渲染,插值表达式中的任何一个变量被限制,整个结果就不可变-->
<h2 v-text="msg"></h2>
h2内的标签中test就是由vue中传的msg变量的值,但是其中html标签不会被解析
里面传的值还能进行四则运算字符串等等的相关操作
<h2 v-html="html"></h2> <--假设html变量为<a>ss<a>-->
h2标签会显示ss
html标签可被解析
属性指令:v-bind:属性名="属性值" => v-bind: 可以简写为 :
<!--1)变量:变量的值为字典--> <div :style="my_style" class='test'></div> <script> new vue({ el:'.test' data:{ my_style: { width: '100px', height: '100px', 'background-color': 'cyan', borderradius: '50%' }, } }) </script>
<!--2)字典中的多个变量--> <div :style="{width: w, height: h, background: b}"></div> <script> new vue({ el:'.test' data:{ w: '50px', h: '50px', b: 'red', } }) </script>
<!--class属性--> <!--<div class="box blue"></div>--> <div :class="c"></div> <div :class="[c1, c2]"></div> <div :class="[c1, 'blue']"></div> <!--x为类名,是否生效有变量y(true|false)值决定--> <div :class="{x: y}"></div> <div :class="[{'box': true}, c2]"></div> <script> new vue({ el: '#app', data: { c: 'box blue', c1: 'box', c2: 'green', y: true, } }) </script>
事件指令 v-on:事件名="函数" => v-on: 可以简写为 @
<script> new vue({ el:'h1' data:{ msg:'插入的信息' } methods: { 函数名 () { 函数体 }, }) </script>
<script> new vue({ el:'h1' data:{ msg:'插入的信息' } methods: { 函数名:function () { 函数体 }, }) </script>
<script> new vue({ el:'h1' data:{ msg:'插入的信息' } methods: { 函数名:() => { 函数体 }, }) </script>
注意点
:这种写法,内部拿不到this(这里的this是指window)
<!--没有传值默认传 函数会接收到事件对象 --> <div @click="btnclick1">{{ msg }}</div> <!--方法()不会直接调用方法,而是在点击触发后进行传参,接收到的参数就是传入的参数--> <div @click="btnclick2(1, msg)">{{ msg }}</div> <!--一旦书写 方法() 就不再传入事件对象,通过 $event 手动传入事件对象--> <div @click="btnclick3(msg, $event, $event)">{{ msg }}</div>
<form action=""> <!--表单指令:v-model="变量"--> <!--双向绑定:一个地方修改值,所有地方的数据都会被更新--> <div> <input type="text" v-model="info" name="usr"> <input type="password" v-model="info" name="pwd"> <p>{{ info | infofilter }}</p> </div> <div> <!--单选框:v-model="变量存放的是某个单选框的value值,代表该选框选中"--> 男<input type="radio" name="sex" value="male" v-model="sex_val"> 女<input type="radio" name="sex" value="female" v-model="sex_val"> </div> <div> <!--单独的复选框:v-model="true|false代表该选框是否选中"--> 是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree"> </div> <div> <!--群复选框:v-model="存放选中选框value的数组"--> <!--cbs_valrug如果传空数组会一个都不选,如果数组对应里面的value会勾选--> <!--cbs_valrug如果传true|false,里面的能容就表示要么全选要么都不选-> 男<input v-model="cbs_val" value="male" type="checkbox" name="hobby"> 女<input v-model="cbs_val" value="female" type="checkbox" name="hobby"> 不能说<input v-model="cbs_val" value="others" type="checkbox" name="hobby"> <p>{{ cbs_val }}</p> </div> <div> <input type="submit"> </div> </form> <script> new vue({ el: '#app', data: { info: '', sex_val: 'female', cb_val: 0, cbs_val: ["others"] } }) </script>
使用:
<div class="box red" v-if="ture|flase" key="box_red"></div> <div class="box blue" v-show="ture|flase"></div> 接收的值只能是ture|flase,如果是0则是flase,如果是1则是ture key属性可以对于在内存中名字进行设置,且f12你看不到key这个属性
关于内存的存储
关于内存中的调用
如对本文有疑问, 点击进行留言回复!!
JavaScript 好题汇总分享(持续更新,看到好题就写)
XMLHttpRequest 2级 &&进度事件&&JSONP
使用递归原生实现拷贝&&最简单的方法实现深拷贝
网友评论