1.创建Vue实例，初始化渲染的核心
- 准备容器
- 引包
- 创建Vue实例new Vue()
- el用来指定控制的盒子
- data提供数据
2.插值表达式
作用利用表达式插值，将数据渲染到页面中
格式{{表达式}}
注意点
- 表达式的数据要在data中存在
- 表达式是可计算结果的语句
- 插值表达式不能写在标签里面
3.Vue的相关指令
3.1 v-前缀的标签属性
- v-html="表达式"设置当前标签元素的innerhtml
- v-show="表达式"表达式的值为true时显示，false隐藏
原理是display:none适用于频繁切换隐藏场景 - v-if="表达式"表达式的值为true时显示为false时隐藏
原理是创建或者移除元素节点适用于不频繁切换的场景 - v-else=" “和v-else-if=” "辅助v-if进行判断渲染，需要紧挨着v-if一起使用
- v-on可以简化为 @
- v-on:事件名=“内联语句”
- v-on:事件名="method中的函数名"
methods里面的函数形式 fn(){}
如果不用传参直接写函数名就可以，如果要传参就括号然后里面写参数
- v-bind可以简化为 ：
- :属性名=“表达式”
- **操作class属性 **
- ：class=“{a:true
或者fasle或者判断trueorfalse的语句}” 适用于一个类名来回切换比如tab导航栏 - class=“[类名1,类名2,类名2]”适用于批量删除或者添加类
- ：class=“{a:true
<div id="app">
<ul>
<li v-for="(item,index) in list" :key="item.id" @click="activeindex=index">
<a :class={active:index==activeindex} herf="#">{{item.name}}</a>
</li>
</ul>
</div>
- v-for=“(item,index) in 数组"适用于数据循环，多次渲染整个元素，主要针对数组，对象，数字
如果不用index可以 ”item in 数组”
<ul>
<li v-for="(item,index) in list">{{item}}-{{index}}
</li>
</ul>
案例- 列表渲染和删除功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in alist" :key="item.id">
<span>{{ item.name }}</span>
<span>{{ item.author }}</span>
<button v-on:click="del(item.id)">删除</button>
</li>
</ul>
</div>
<script>
const app=new Vue({
el:'#app',
data:{
alist:[
{id:1,name:'《红》',author:'曹'},
{id:2,name:'《绿》',author:'吴'},
{id:3,name:'《蓝》',author:'施'},
]
},
methods:{
del(id){
this.alist=this.alist.filter(item =>item.id !== id)
}
}
}
)<!--methods写错了而且后面多加了逗号一直报错-->
Vue.config.productionTip=false
</script>
</body>
</html>
v-for里面key的作用：作为唯一标识
注意key的值只能是字符串或者数字类型，推荐使用id，因为需要具有唯一性
- v-model重要，双向数据绑定既可以获取表单内容也可以设置表单元素的内容
- v-model=“表达式” 表达式和data里面的变量**双向联动 **
如果有login和reset直接调用this.变量=''这样就可以reset了- 如果是表单输入框的话获取的就是输入的内容一般为字符，但是可以配合.trim和.number使用
- 单选框 获取的是true or false
- 多选按钮 获取的是选择项的value值
一般会有value和name属性name用来同组相斥 - 复选框 写在selection里获取的是option的value值
option一般有value值 - 文本域 获取的是文本值
- v-model=“表达式” 表达式和data里面的变量**双向联动 **
案例- 列表的添加删除统计清空
<section id="app">
<!-- 输入框 -->
<header class="header">
<h1>小黑记事本</h1>
<input placeholder="请输入任务" class="new-todo" v-model="todoname"/>
<button class="add" @click="add">添加任务</button>
</header>
<!-- 列表区域 -->
<section class="main">
<ul class="todo-list">
<li class="todo" v-for="(item, index) in list" :key="item.id">
<div class="view">
<span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label>
<button @click="del(item.id)" class="destroy"></button>
</div>
</li>
</ul>
</section>
<!-- 统计和清空 -->
<footer class="footer" v-show="list.length>0">
<!-- 统计 -->
<span class="todo-count">合 计:<strong> {{list.length}}</strong></span>
<!-- 清空 -->
<button class="clear-completed" @click="clear">
清空任务
</button>
</footer>
</section>
<!-- 底部 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
todoname:'',
list: [
{ id: 1, name: '跑步一公里' },
{ id: 3, name: '游泳100米' }
]
},
methods: {
del (id) {
// console.log(id) => filter 保留所有不等于该 id 的项
this.list = this.list.filter(item => item.id !== id)
},
add(){
if(this.todoname.trim()==''){
alert("请输入值")
return
}
this.list.unshift({
id:+new Date(),
name:this.todoname,
})
},
clear(){
this.list=[]
}
}
})
</script>
总结
一次添加多个内容-属性添加法
{
属性名：属性值，
属性名：属性值<!--最后一个可以不加逗号-->
<!--new Vue({})这里也是这么个意思-->
}
数组的方法积累
.filter(item=>item.id!=id) <!--这样完了之后一定要赋值原数组回去-->
.unshift()<!--如果里面有多个属性就是{}这个-->
.reduce((sum,index)=>>sum+item.score,0)<!--数组里某一项求值-->
字符串的方法积累
.trim()
<!--应用：1.可以用来去除前后的空格后判断是不是空字符串-->
时间戳的应用
+new Date()
我的错误和思维漏洞
- 在data里面相互引用的时候不加this
- 清空操作字符串就赋值’'数组就就赋值[ ]
- 如果想实时动态改变值：就用@事件=“数值改变的表达式或者函数调用”
- 表达式可计算的特性很重要，插值表达式不放在标签里面，其他就不用考虑了
- params：里面的默认写法是属性名：属性值（后端规定）但是如果穿的是多个属性组成的对象，直接params：对象 就可以
3.2 指令修饰符
- @keyup.enter=""键盘事件监听绑定回车键
- v-model.trim=""双向互动绑定去除首尾空格
- v-model.number=""双向互动绑定字转数字
- @事件名.stop=""阻止冒泡
- @事件名.prevent=“”*阻止默认行为 *
例如a标签的跳转
4.Vue里面的各种属性
methods里面的函数形式 fn(){}
用途：发请求，事件触发
- 在v-on=“”如果不用传参直接写函数名就可以，如果要传参就括号然后里面写参数
- 如果在vue的其他地方和插值表达式 里面要用的话还是要加括号
computed里面的属性形式 f’n(){}
- 和用data里面的其他值一样用这个f’n也就是当为属性在用,所以不管是vue的其他地方还是插值表达式都是f’n
- 缓存特性以提升性能
- 计算属性得出来的值是默认不能修改的，在任何地方修改都会报错，只有加上set方法之后才可以修改
computed:{
计算属性名字：{
get(){
return
},
set(修改的值value）{
}
//当在外部有修改计算属性的行为的时候，就会触发这个set方法，并把修改的值赋值给value,然后可以对value进行相关的操作。
}
但是注意要用computed里面的某个属性里的修改的话就应该是 属性=‘修改值’(vue里面其他地方用还是要加this哦)
watch监视器
如果你写了某个数据的监视器，只要数据变化了，就会触发这个对应监视器
作用：可以根据数据的实时变化，来发送请求
little tips：用clearTimeout(a) const a=setTimeout()来实现防抖延迟执行 .
非整个对象的写法
整个对象的监听写法
deep是深度监视就是对对象里面每一个属性都监视，immmediate是一进页面就翻译一次。
5.生命周期
konwlegde
生命周期钩子：在vue的生命周期里自动运行的函数，可以在这些函数里面运行自己的代码。
created：发初始化请求
mounted：dom操作
destroy是在关闭页面后执行的，可以用app.$destroy()将数据变成死数据
example-自动获取焦点
6.工程化开发
- index.html提供vue所管理的容器
- App.vue是根目录
- components是子组件
- main.js导入vue,App.vue,用render方法将App.vue动态渲染到 index.html
