Vue.js学习笔记 第一天

第一天

前端三大主流框架:vue.js angular.js react.js

  • 框架和库的区别:
    框架:是一套完整的解决方案,对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目
    库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其他库实现需求

  • MVC和MVVM的区别
    MVC(model view control)是后端的数据层,视图层,业务逻辑层
    MVVM(model,view,VM-Viewmodel)是前端视图层的开发思想,把视图层分成了三个部分。M-页面中的数据;VM-分割了V和M,当V要获取或保存数据后,VM进行中间的处理,实现双向数据绑定;V-页面中的html代码
    MVVM提供了数据的双向绑定,使前端开发更加方便

  • Vue.js基本代码

<body>
		<div id="app">
			<p>{{msg}}p>
		div>
body>
<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'123',
			}
		})
script>

运行结果

  • v-cloak指令
    解决闪烁问题
<div id="app">
	<p v-cloak="">{{msg}}p>
div>
<style type="text/css">
	[v-cloak]{
		display: none;
	}
style>
  • v-text指令和v-html指令
<p v-cloak="">+++{{msg}}---p>

<h4 v-text="msg">----h4>

{{msg2}}

<div v-html="msg2">----div>

Vue.js学习笔记 第一天_第1张图片

  • v-bind指令

<button type="button" value="按钮" v-bind:title="mytitle+'123123'">button>
<button type="button" value="按钮" :title="mytitle+'123123'">button>
  • v-on指令

<input type="button" name="btn" id="btn" value="按钮" v-on:click="show"/>
methods:{//methods属性定义了vue实例中所有的方法
	show:function(){
		alert("hello");
	}
}

事件修饰符:

  • .stop阻止冒泡
    冒泡机制:由内向外
    比如在一个div中有一个按钮,没有阻止冒泡事件时,点击按钮的同时也会触发点击下方div的事件,此时需要使用.stop阻止冒泡事件
    这时,点击按钮时就不会触发下方div的点击事件
<input type="button" name="btn1" id="btn1" value="浪起来" @click.stop="comeon"/>
  • .prevent阻止默认事件
  • .capture添加事件侦听器时使用事件捕获模式
    捕获机制:由外向内
    点击div中的按钮时,先出现div的点击事件,再出现按钮的点击事件
  • .self只当事件在该元素本身(比如不是子元素)触发时触发回调
    点击按钮只出现按钮的点击事件,点击div只出现div的点击事件
  • .once事件只触发一次

你可能感兴趣的:(Vue.js学习笔记 第一天)