前言： 前端的mvvm模式与后端的mvc模式的关系示意图：
<!-- 1.引入vue -->
<script src="./lib/vue.js"></script>
</head>
<body>
<!-- Vue实例所控制 的这个元素区域，这就是我们的V -->
<!-- 将来new的VUE的实例，会控制这个元素的所有内容 -->
<div id="app">
<h1>{{name}}</h1>
</div>
<script>
// 创建一个vue的实例
//当我们导入包之后，我们党的浏览器内存中，就多了一个vue实例
//注意：我们new出来的这个vm对象，就是我们mvvm中的VM调度者。
var app = new Vue({
el:"#app",//我们当前new 的这个vueshili,要控制页面上的哪个区域
//这里的data就是mvvm中的M，专门用来保存每个页面中的数据的
data:{//data属性中，存放着el中药用到的数据
name:"我是个快乐的小小鸟"//通过vue提供的指令，很方便能把数据渲
//染到页面上，不再需要动手操作DOM元素了
}
})
</script>
</body>
tip： <div id="app> </div可以使用快捷键“div#app”
{{插值表达式}}，v-text,v-html的区别
-
{{}}有闪烁我问题，可以用v-clock解决。已经被版本的更新解决
-
v-text会覆盖掉元素中原本的内容，但是只会替换掉自己 的这个内容，不会吧整个元素清空。
-
v-html：识别html的标记语言。
<p> {{name}}</p> <p v-text="name">heihei</p> <!-- //<h1>我是个快乐的小小鸟</h1>" --> <p v-html="name">haha</p> <!-- 我是个快乐的小小鸟 --> data:{ name: "<h1>我是个快乐的小小鸟</h1>" }
v-bind:提供用于绑定属性的指令
-
v-bind指令可以被简写为“：要绑定的属性”
-
v-bind中，可以写合法的js表达式。
<input type="button" value="按钮" v-bind:title="mytitle"> data:{ name:"heiei", mytitle:'hahaha' }
v-on事件绑定机制
<input type="button" value="按钮" v-on:click="show">
methods: {
show(){
alert('hello')
}
},
简写：@属性
this关键字
在vm实例中，如果想要获取data上的数据，或者想要调用methods上的方法，就必须通过this.数据属性名 或者this.方法名来进行访问。这里的this就表示我们new出来的VM实例。
data:{
name:'猥琐发育，别浪！' ,
intervalid:null
},
if(this.intervalid!=null)//这里 thsi就是指data
ES6中的箭头函数和定时器
this.intervalid= setInterval(() => {//ES6中的箭头函数，这样的话，函数体内的this就可以指向函数体外了；
var start = this.name.substring(0,1)
var end = this.name.substring(1)
this.name= end+start
},400)
-
然后是箭头函数中的this,资料上说的箭头函数内部是没有this的，也就是说，箭头函数里面的this会继承自外部的this。
-
定时器的写法：setInterval(function(){},间隔时间值)
-
setInterval函数最后一定返回之一个值，这样的话，this.intervalid就一定不是null了。可以从这里来判断其是已经加速过了。
-
clearInterval(定时器) ：清空定时器
data:{ name:'猥琐发育，别浪！' , intervalid:null //在data上定义定时器id }, this.intervalid= setInterval(() => 。。。。。 stop(){ clearInterval(this.intervalid) this.intervalid=null } -
将定时器定义在data中，这样它就是全局函数了。开始和结束函数都可以对他进行操作了
事件修饰符
-
.stop阻止冒泡 冒泡是有内向外，给内层加。
<button @click.stop="btnclick">按钮</button> -
.prevent阻止默认行为
<a href="https://www.baidu.com" @click.prevent="Aclick">点击跳转</a> -
.capture实现捕获触发事件的机制。和冒泡相反，由外向内，给外层加。
<div style="height: 300ox;background:blue"@click.capture="divclick"> <button @click="btnclick">按钮</button> </div> -
.once允许且仅允许触发一次事件处理函数 <
div style="height: 300ox;background:blue"@click.capture.once="divclick"> <button @click="btnclick">按钮</button> </div>
实现双向绑定
- v-bind 只能实现数据的单项绑定，从M自动绑定到V。
- 使用v-model可以实现表单元素和model中数据的双向绑定。
- 注意：v-model只能运行在表单元素中
- 表单元素有：input(radio,text,address,email…) ------> select -------> checkbox -----> textarea
<div id="app">
<!--带有‘v-’前缀的特殊字符称为指令 -->
<input type="text" style="width:100%" v-model="msg">
<h1>
您的选择是：
{{msg}}
</h1>
<script>
var vm=new Vue({
el:"#app",
data:{
//使用数组来记录选中的数据
msg:'heiheihei'
}
})
</script>
</div>
vue中的样式
<style>
.active{
letter-spacing: 0.5em;
}
.red{
color: red;
}
.thin{
font-weight: 200;
}
</style>
-
第零种方式
<div id="app"> <h1 class="red thin">轰轰霍霍红山书</h1> -
第一种方式
第一种使用方式，直接传递一个数组，注意这里的class需要使用v-bind 做数据绑定 <h1 :class="['thin','red']">轰轰霍霍红山书</h1> -
第二种方式
第二种方式：使用三元表达式 ,咋数组使用，
<h1 :class="['thin','red',flag?'active':'']">轰轰霍霍红山书</h1>
- 第三种方式
第三种方式： 用对象代替三元表达式，可提高代码的可读性
<h1 :class="['thin','red',{'active':flag}]">轰轰霍霍红山书</h1>
第四种方式(
我没弄出来）
## 在为class使用v-bind绑定对象的时候，对象的属性是类名，由于对象的属性可带引号，也可不带引号 <h1 :class="{ red：true }">轰轰霍霍红山书</h1>
- 关于单引号，不加引号和双引号：
如果不加引号或者是双引号；他会去属性中寻找，找不到的化，就会报错
如果是单引号，他会认为是类的。
循环数组
循环普通数组
<p v-for="(item) in items" :key="index">{{item}}</p>
items:[1,2,3,4,5]
遍历对象数组
<ul>
<li v-for="(phone,index) in phones">
{{index}} --- {{phone.id}}---{{phone.name}}---{{phone.color}}
</li>
</ul>
phones:[
{id:1,name:'一加',color:'black'},
{id:2,name:'魅族',color:'yellow'},
{id:3,name:'华为' ,color:'black'}
]
key属性的使用
- 在 v-for 循环的时候，key属性只能使用，number获取string
- key在使用 的时候，必须使用v-bind绑定的形式，指定key的值
- 在组件组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数组 类型 ：key值
v-if 和v-show()
- v-if 是直接没有这个元素
- v-show 是没有显示，“f12”可以找到
- v-if：每次都会重新删除或者创建元素，有较高的性能切换消耗，如果涉及频繁的切换，最好不要用这个。
- v-show 只是切换了元素的display:none元素 ，有较高 的初始渲染消耗，如果元素永远也不可能被用户看到，推荐使用v-if
1590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
