扯点最基本的废话。
Vue主要是“面向数据”编程。当数据发生改变时使用虚拟DOM来更改某一DOM节点,避免将整个页面渲染
vue.js作者尤雨溪,现在是马爸爸的人,个人觉得vue现在是国内目前最火的前端mvvm框架(model-view-ViewModel),相对于angular 和 recat,vue 的学习路线相对简单,中文文档和资料相对详细,比较容易上手,当然也没有想象的那么简单。还要告诉你们个天(cao)大(dan)的好消息就是尤大大已经在微博上说过 vue3.0可能马上要出世了。 不管vue更新到什么版本都得从最基础的入门,
强调:不支持ie低版本,谁要兼容ie8,请把眼睛移到右上角,看见那个叉叉没,点击它。Now,go out and hurry up.
说到这里又想多说几句题外话 其实吧 我接触vue也就一年的时间 在这里写博客并不是说我对vue有多懂,因为最近项目不忙,我也只是想把我学过再过一遍 总结总结,做了留痕。当然如果能帮助到看到这篇文章的你,我也会很高兴。
推荐一门不错的视频教程:在腾讯课堂里面搜索vue2.0小白入门视频教程,讲师是米斯特吴。十分推荐大家闲暇的时候可以看看。对应的还有很多实战类视频,多动手多实践。
前面两章说过了 vue项目的安装和各类配置项。但下面几章我们引用外部script学习,如果不会引入的同学请点链接>传送门
start
HelloWorld
学习一门新技术 helloworld肯定是必经之路。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:'Hello World!'
}
})
</script>
</html>
在这个例子中,el属性指向view层。将vue实例挂在到#app上。data核心作用是存放显示在页面上的数据。
指令
1.1 v-text
作用:操作元素中的纯文本
快捷方式:{{}}
<body>
<div id="app" v-text="message">
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:'Hello wayne'
}
})
</script>
1.2 v-html
作用:操作元素中的html
<body>
<div id="app" v-html="message"> </div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:'Hello wayne'
})
</script>
1.3 v-bind
作用:v-bind绑定页面中的元素属性。class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑定。
语法:v-bind:元素的属性名 = “data中键名”
//简写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
//html绑定class
<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
//html 绑定style 拼接
<div :style="{ fontSize: size + 'px' }"></div>
上述的 isActive hasError size 都是在实例data里面定义的属性。
这一章对vue指令做一些简单的示例,v-bind在日常开发中有很多的用法 近两天我会整理一篇v-bind的文章出来 详细吧v-bind说一说。
1.4 v-show v-hide
作用:判断是否显示隐藏,有jquery经验的同学都应该接触过show hide就很容易理解 ,
语法:v-show="true/false"
<!-- v-show小案例 -->
<div id="app">
<button @click="isShow = !isShow">点击切换</button>
<div v-show= "isShow" >
{{message}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
isShow:'true',
message:'陈美丽同学请坐下发言'
}
})
</script>
使用v-show特点就是会在dom中渲染出来,只是被设置了css display:node 属性;
1.5 v-if v-else
作用:v-if接收bool类型。true的话则生成html,false则不生成。或者直接将元素remove掉。
语法:v-if=”判断表达式”
<body>
<!-- v-if小案例 -->
<div id="app">
<button @click='isIf= !isIf'>点击查看</button>
<h1 v-if="isIf">{{message}}</h1>
<h1 v-else>{{message1}}</h1>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:'陈美丽同学请坐下',
message1:'陈独秀同学请坐下',
isIf:true,
},
})
</script>
v-else 必须在v-if 后面使用 同等与javascript中 if判断 ;当然也可以用来多重判断
v-if和v-show优缺点
v-if和v-show都是用来控制元素的渲染。v-if判断是否加载,可以减轻服务器的压力,在需要时加载,但有更高的切换开销;v-show调整DOM元素的CSS的dispaly属性,可以使客户端操作更加流畅,但有更高的初始渲染开销。如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
1.6 v-on 事件绑定
作用:v-on指令绑定一个事件监听器,通过它调用我们 Vue 实例中定义的方法:v-on
<body>
<!-- v-on小案例 -->
<div id="app">
<button @click="alertfun()">点击查看</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:'陈美丽同学请坐下',
},
methods:{
alertfun:function(){
alert(this.message)
}
},
})
</script>
简写为 如 @click
1.7 v-model双向数据绑定
作用:v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。
<body>
<!-- v-model小案例 -->
<div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
message:''
},
})
</script>
在v-model指令后面还可以添加多个参数(number、lazy、debounce)。
下面属于vue定义的事件修饰符。
1.number
如果想要用户的输入自动转换为Number类型(如果原值的转换结果为NAN,则返回原值),则可以添加一个number特性。
2.lazy
在默认情况下,v-model在input事件中同步输入框的值与数据,我们可以添加一个lazy特性,从而将数据改到在change事件中发生。
3.debounce
设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如,在input中输入内容时要随时发送ajax请求),那么它较为有用。
结语:
vue的这些指令在日常开发的使用频率非常高,看了简单的用法 可以结合起来做一个实例来 加强自己的熟练度,比如万年不变的todolist。
同行没回头 前端路上我们一起走。
最后的最后再吐个槽
今天整理这篇文章的时候 电脑蓝屏了两次 第一次还好 第二次在我写结语的时候 蓝屏。重启后 csdn竟然没有自动给我存草稿。又撸了一边。