vue知识点第一天
1.前端框架
1.dom操作
jquery
2.mvvm
1.angular
指令 服务 依赖注入
2.react
虚拟dom 组件
3.vue
虚拟dom 组件 +指令
3.mvc
1.m
Model 模型
2.v
View 视图
3.vm
c Ctrl 控制器
4.vue
1.一款构建前端界面的渐进式 mvvm框架
2.特点
1.指令（渲染出视图）
2.模板（渲染出视图）
3.控制器：
数据处理：
1.当数据发生变化时候 触发模板重新渲染视图
2.视图发生变化时会更新数据
3.视图View 和数据模型Model 通过 viewModal双向自动更新
5.vue 指令
一：文本渲染：
1.{{}} 文本渲染
2.v-text
二：条件渲染：
1.v-if：
v-if
v-else-if
v-else
特点：当表达式为真 当下节点显示
表达式为假 当前节点隐藏
2.v-show
3.v-if与v-show区别
1.v-if 条件不满足直接移除节点
2.v-show 条件不满足 通过css方式隐藏节点
3.如果频繁切换显示与隐藏 建议用v-show
4.如果显示与隐藏切换次数少 建议用v-if
三：属性渲染指令
1.v-bind:属性值=“”
2.简写:属性值=“”
6.vue 参数
el：指定模板
data：定义数据
methods：定义方法
写一个案例就理解啦
案例一
从元素里显示对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个vue案例</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{say}}</p>
<p>{{1+3}}</p>
<p>{{'你说:'+msg}}</p>
<p>{{msg.split('').reverse().join('')}}</p>
<p>msg的长度是：{{msg.length}}</p>
</div>
<script>
new Vue({
el:"#app", //el 模板指定
data:{ //data 定义的数据
msg:"Hello World",
say:"吃了吗？"
}
})
</script>
<!-- 模板语法 文本模板指令 {{}} -->
</body>
</html>
案例二
从元素里显示对象的第二种方法，也是常用的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个vue案例</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{say}}</p>
<p v-text="'老师:'+say"></p>
<p v-html="say"></p>
</div>
<script>
new Vue({
el:"#app", //el 模板指定
data:{ //data 定义的数据
msg:"Hello World",
say:"吃了吗？,没有<strong>早饭</strong>"
}
})
</script>
<!-- 模板语法 文本模板指令 {{}} -->
</body>
</html>
案例三
vue案例-属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue案例-属性</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-bind:title="mytitle">属性绑定</h1>
<input type="text" v-bind:value="mytitle">
<h1 :title="mytitle">我爱我的未来女朋友</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
mytitle:'我爱我的祖国'
}
})
</script>
</body>
</html>
案例四
vue案例-条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue案例-条件渲染</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="isLog">欢迎回来我的主人 <a href="">退出</a></p>
<p v-else>您还没有登录，请求 <a href="">登录</a> <a href="">注册</a></p>
</div>
<script>
new Vue({
el:"#app",
data:{
isLog:false
}
})
</script>
</body>
</html>
案例五
vue案例-条件渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue案例-条件渲染</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<p v-show="score>90">你的考试大于90分给你奖励一个女朋友</p>
<p v-show="score<60">你的考试小于60分，拖到外面，突突10分钟</p>
</div>
<script>
new Vue({
el:"#app",
data:{
score:48
}
})
</script>
</body>
</html>
vue知识点第二天
接昨天vue 指令
四 遍历：
v-for=“(item,index) in list”
:key=“唯一值”
五：事件
1.事件默认参数 $event
2.事件修饰符
.stop 阻止事件冒泡
.once 只响应一次
.prevent 阻止默认事件
3.按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
4.表单绑定
1.让表单的值与 vue实例属性绑定
2.checkbox
一个选项 选中 true 非 false
多个选项 用一个数组接收值
3520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
