vue1-43

引入

需要声明变量

模板语法

@ click/change。。。。。/函数（）<方法>
定义方法：

在vue中this指向的是实例

：class 的作用：使其变为一个动态属性
支持三目表达式的写法

<div ：class="isColor?'red'：'yellow'">切换背景色222</div>

<!--v-show v-if 指令-->
<div v-show="isshow">我是动态显示和隐藏</div>
<div v-if="iscreated">我是动态创建和删除</div>
<!--v-for 列表渲染的指令-->
<ul>
<li v-for="data in list">
{{data}}
</l1>
</ul>
<ul>
<li v-for="(item,index) in list">
{{item}}-{{index}}
</1ip
</ul>

todolist

<！--双向绑定了一个输入框的value-->
<input type="text" v-model="mytext"/>
{{mytext}}
<button @clkick="handleAdd()">add</button>
<ul v-show="datalist.length">
<li v-for="(data,index) in datalist">
{{data}}
<button @click="handleDel(index)">del</button>
</li>
</ul>
<div v-show="!datalist.length">待办事项空空如也</div>


handleDel(index){
console.log("del",index)
this.datalist.splice(index,1)

vue中的splice：
语法格式：splice(index, len, [item])

可以用来替换/删除/添加数组内某一个值或几个值，该方法会改变初始数组。

index：数组开始下标
len：替换/删除的长度
item：替换的值，为删除时item为空

v-html

<div id="box">
{{mytext}}
<div v-html="mytext"></div>
</div>
<script>
new Vue({
el:"#box",
data:{
mytext："<b>加粗的</b>"
}
}）

通过v-html可以使其通过html’解析，否则页面直接显示

<b>加粗的</b>

class&style

vue2：set法
vue3：

条件渲染

if 与else可以取代取反

<div v-if="isCreated">111111</div>
<div v-else>222222</div>

template v-if,包装元素template 不会被创建

列表渲染

<ul>
<li v-for="(item,index) of datalist">
{{item}}--{{index}}
</li>
</ul>
<ul>
<li v-for="(item,key) of obj">
{{key}}-{{item}}
</li>
</ul>

vue3可以通过返回数组的方式实现

模糊查询

includes（“”）

var arr =["aaa","add","bbb","bbc","ccc","ddd","eee","ade"]
var newlist = arr.filter(item=> item.includes("a"))
console.log(newlist)

但是删除后回不来
所以更适合：

或者：
return法：

事件处理器

handleInput(evt){
console.log("input",evt.target)

evt.target拿到的就是输入框

事件修饰符

阻止冒泡：

handleLiClick(evt){
console.log("li")
evt.stopPropagation()
},

<li @click.stop="handleLiclick">1111</li>

<div id="overlay" v-show="isShow" @click="isShow=false">
<div id="center" @click.stop>
<div>用户名：<input type="text"/></div>
<div>密码：<input type="password"/></div>
<div>
<button>登录</button>
</div>
</div>
</div>

或者：

<div id="overlay" v-show="isShow" @click.self="isShow=false">
<div id="center">
<div>用户名：<inputtype="text"/></div>
<div>密码：<input-type="password"/></div>
<div>
<button>登录</button>
</div>
</div>

按键修饰符

evt.code=
@keyup.enter.crtl:enter+crtl

购物车

1.创建一个新的数组，并且v-model双向绑定
2.value值为返回的对象，可以通过返回的值的.price算出价格
3.删除工作时不能只是删除原来对象中的值，否则会有bug
4.通过fileter过滤，覆盖原来的新数组

表单修饰符

.number变为数字类型，本来是字符串类型
去首尾空格：
.trim

计算属性

计算属性，负责逻辑放在计算属性中写
难以维护：
{{ myname.substring(0,1).toupperCase() + myname.substring(1) }}
更适合：

{{ myComputedName}}

computed{myComputedName(){
return this.myname.substring(0,1).toUpperCase() + this.myname.
}
}

0.data =>状态，被拦截。
1.方法==》事件绑定，逻辑计算。可以不用return，没有缓存
2.计算属性(重视结果)=》解决模板过重问题，必须有return，只求结果，有
缓存，同步。
3.watch（重视过程），监听一个值的改变。不用返回值，异步同步

watch

只要监听的值有改变，就可以让函数做一些事
监听值必须相等

fetch

get

methods:{
handleFetch(){
fetch("./json/test.json")
.then(res=>res.json())
.then(res=>{
console.log(res)
}）
.catch(err=>{
console.log(err)
｝）
}

post

get url路径 ?name=kerwin&age=100
post body请求体，
(1) x-www-formurlencoded , name=kerwin&age=100
(2) json ,
{“name”:“kerwin”,age:100}

过滤器

管道符 |

组件定义

将dom，js，css封装在一起
比如自定义一个<navbar>

其中的属性值都是隔离的
只能在组件内部中使用

1.起名字：js驼峰，html 链接符-
2.dom片段没有代码提示没有高亮显示-vue单文件组件解决
3.css只能写成行内。-vue单文件组件解决
4.template 包含一个根节点
5.组件是孤岛，无法【直接】访问外面的组件的状态或者方法。-间接的组件
通信来交流。
6.自定义的组件data必须是一个函数，
7.所有的组件都在一起，太乱了 —vue单文件组件解决

父传子

Vue.component("navbar",{
props:["myname"],//接受myname属性,
this.myname
template:<div>
<button>left</button>
<span>{{myname}}</span>
<button>right</button>
</div>
}）

属性验证&默认属性

/∥ props:["myname","myright"],//接受myname属性，
this.myname
props:{
myname:String,
myright:Boolean
},/∥接受myname属性，
属性验证

子传父

事件的函数一定是在父组件中定义好的

new Vue({
el:"#box",
data: {
isShow: true
}，
methods:{
handleEvent(data){
consoLle.1og(“父组件的定义的事件",data)
this.isShow = !this.isShow
}
}）

中央事件总线

生命周期：mounted