https://docs.qq.com/mind/DYU9FRW92S3BLV0R4
初识VUE
vue是一套用于构建前端用户界面的前端框架
用vue往HTML页面填充数据非常的方便
框架是一套现成的解决方案，程序员只能遵守自己的规范，去编写自己的业务功能
vue的指令、组件（是对UI结构的复用）路由，vuex，掌握了这些就掌握了vue
vue的特性主要体现在数据驱动视图、双向数据绑定
数据驱动视图
好处是页面数据变化时，页面会自动重新渲染（程序员不用再操作DOM，只需只要维护数据，页面就可以自动渲染）
需要注意的是数据驱动视图是单向的数据绑定（这是一个单向的过程，所以页面结构变化不会改变数据）
链接：请你说说vue的特性__牛客网
来源：牛客网
1.轻量级的框架
vue是MVVM数据绑定和可组合的组件系统，灵活的api，易上手
2.数据双向绑定
通过数据劫持结合发布者-订阅者模式，利用object.defineProperty重写对象get和set方法，当访问属性是触发get方法，修改属性值时触发set方法，之后更新对应的DOM节点。
3.指令
vue主要通过指令也页面进行交互，如：v-model、v-if、v-show、v-for。
4.组件
组件是可复用的 Vue 实例。
5.路由
路由用于构建单页面应用。Vue 单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来
6.状态管理
状态管理是一个单向的数据流，State 驱动 View 的渲染，而用户对 View 进行操作产生 Action，使 State 产生变化，从而使 View 重新渲染，形成一个单独的组件。
双向数据绑定 
开发者不需要不需要手动操作DOM，就可以获取或者改变表单的值
在网页中，form表单负责采集数据
js数据的变化会被自动渲染到页面上，页面上表单采集的数据发生变化的时候，会被vue自动获取到，并自动更新到js数据中
MVVM是vue实现两个特性的核心原理
mvvm的全称是model，view，viewModel，它把html页面分成了三个部分
model是表示当前页面渲染时所依赖的数据源
view表示当前页面所渲染的结构
viewModel是vue的示例，是mvvm的核心
mvvm的工作原理
vue被设计为可以一下向上逐层应用，它是一个mvvm数据双向绑定的库，专注ui层，其核心思想包括数据驱动视图，组件化思想
vue的版本
第一个vue示例
需要先准备vue,js脚本
<body>
<!-- div#app指的是MMVM中的的V view视图 -->
<div id="app">{
{msg}}</div>
</body>
<script src="[email protected]"></script>
<script>
// new Vue指的是MVVM中的VM VM把视图和数据联系起来
const vm=new Vue({
el:"#app",
// data指的是MVVM中的M model数据模型
data:{
msg:"hello world"
}
})
console.log(vm)
</script>el属性只能识别一个，所以绑定的标签必须是唯一的，id名是唯一的，我们一般选择id名
且不能是html、body。因为vue是实现模块化开发的，不能对别的模块产生影响
data是放置数据的地方，任何数据都可以，以键值对应的形式存放
devtools调试工具
百度搜索安装后，在插件详情中，启用“允许访问文件网址”
F12末尾可以看到vue，然后可以手动拖到前面
vue的指令与过滤器
vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
内容渲染指令
渲染DOM元素的文本内容，常用的有三个
1、v-text，会覆盖标签中原本的内容
2、{ { }}，插值表达式，内部可以放置数据、三元表达式、函数等简单的js代码。需要注意的是使用插值表达式改变页面内容，会造成全页面的数据重新计算并渲染，导致效率低下
{
{Math.random()}}
<p>{
{bool?"bool为真":"bool为假"}}</p>
<p>{
{num.toFixed(2)}}</p>3、v-html，也会覆盖元素内原本的内容，但是可以解析html内容。会带来xss攻击，通过标签攻击网站
<body>
<div class="app">
<p v-text="name">姓名：</p>
<p>性别：{
{ sex }}</p>
<p v-html="tag"></p>
</div>
</body>
<script>
const vm=new Vue({
el:".app",
data:{
name:"jack",
sex:"女",
tag:"<strong>加粗</strong>"
}
})
</script>属性绑定指令
为元素动态绑定属性值，需要注意的是插值表达式不能绑定在属性值中
v-bind，在实际开发中可以简写为英文的冒号，“:”
使用v-bind的情况
第一种情况 属性值只有一个的情况
v-bind:属性="变量"。例如v-bind:class="one"
第二种情况：属性值有多个变量
v-bind:属性="[变量,变量]"。例如v-bind:class="[one,two]"
第三种情况:属性值不确定的情况
v-bind:属性="{k:v}" k代表的是标签属性的值,是否存在由v的值决定 v是true就存在。否则不存在 v可以是表达式。
例如v-bind:class="{one:1==1,two:one=='one'}"
:class="{active:size>30}"
:class="[i ? 'active' : '']"，用三元表达式，用{k:v}更简单，:class={active:i}
第四种情况：绑定样式
v-bind:style="{k:v}"，k代表样式属性，v代表样式属性值。
例如:style="{fontSize:‘’24px’,color:‘red’}"
<body>
<div class="app">
<input type="text" v-bind:placeholder="tip">
<img :src="img" alt="">
</div>
</body>
<script>
const vm=new Vue({
el:".app",
data:{
tip:"请输入内容",
img:"https://img-home.csdnimg.cn/images/20201124032511.png"
}
})
</script>在插值表达式或者属性绑定中写js语句
<body>
<div class="app">
<p>{
{num+1}}</p>
<!-- 可以写js语句，可以用js方法 -->
<p >{
{c.split('').reverse().join('')}}</p>
<!-- 前一个index是一个字符串，后一个index是属性，值为3 -->
<p :index="'index'+index">1</p>
</div>
</body>
<script>
var vm=new Vue({
el:".app",
data:{
num:10,
c:"123456789",
index:3
}
})
</script>在使用v-bind属性绑定期间，需要对绑定内容进行动态拼接，则字符串外面应该包裹单引号
v-on的基本用法
v-on用来绑定事件，事件方法写在methods属性中。
事件方法可以简写，可以省略，:function
事件方法中，this就是vue实例化的对象
事件方法不能用箭头函数，箭头函数的this会指向window
事件方法可以传入参数
v-on:可以简写为@
$event参数代表事件对象
事件修饰符，重要的有两个，.prevent阻止事件默认行为，.stop阻止冒泡
vue的事件中，this==new Vue()对象，this.data.num==this.num
@click.prevent，@click.stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="[email protected]"></script>
</head>
<body>
<div class="app">
<p>{
{count}}</p>
<button v-on:click="add(1,$event)">+1</button>
<button @click="sub">-1</button>
<a href="http://www/baidu.com" @click.prevent>百度</a>
</div>
</body>
<script>
var vm=new Vue({
el:".app",
data:{
count:0
},
methods:{
// add:function(){
// this.count+=1;
// }
//可以简写
add(n,e){
this.count+=n;
if(this.count%2==1){
e.target.style.backgroundColor="red";
}else if(this.count%2==0){
e.target.style.backgroundColor="green";
}
},
sub(e){
vm.count-=1;
if(this.count%2==1){
e.target.style.backgroundColor="red";
}else if(this.count%2==0){
e.target.style.backgroundColor="green";
}
this===vm//true
}
}
})
</script>
</html>按键修饰符@keyup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="[email protected]"></script>
</head>
<body>
<div class="app">
<input type="text" @keyup.esc="clear" @keyup.enter="submit">
</div>
</body>
<script>
var vm=new Vue({
el:".app",
data:{},
methods:{
clear(e){
e.target.value="";
},
submit(e){
alert(e.target.value);
}
}
})
</script>
</html>双向数据绑定v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="v
最低0.47元/天 解锁文章
858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
