一些注意点
vue基础
vue-cli：工程化开发
vue-router：在Vue中实现前端路由
vuex：应用足够复杂时，用于保管数据
element-ui
vue3
Angular ==》 React ==》 Vue
生命周期函数中的this都是vm
开发中自行向vm身上追加属性时【场景：比如methods中要访问mounted钩子中的变量】，避免追加敏感名称命名的属性，比如id、key等等
一般不会直接调用vm.$destroy()，通常是他杀，路由中切走了，对应的组件就销毁掉了
定时器如果不手动关的话，只要页面还在，定时器就还在执行
1. el与data的两种写法
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。【灵活性更强】
const vm = new Vue({
el: document.getElementById("root"),
data(){
return{
name: "尚硅谷",
href: "http://www.baidu.com",
nihoa:"kkk"
}
}
})
vm.$mount('#root')
2.data有2种写法
(1).对象式，如下
new Vue({
el: document.getElementById("root"),
data: {
name: "尚硅谷",
href: "http://www.baidu.com",
nihoa:"kkk"
}
})
(2).函数式
new Vue({
el: document.getElementById("root"),
data: function(){
return{
name: "尚硅谷",
href: "http://www.baidu.com",
nihoa:"kkk"
}
}
})
还可以进一步简写为【这是因为在对象里面写方法可以进行简写】
new Vue({
el: document.getElementById("root"),
data(){
return{
name: "尚硅谷",
href: "http://www.baidu.com",
nihoa:"kkk"
}
}
})
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，比如这里的data，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，而是Window实例【箭头函数没有自己的this，往外找就找到了全局的window】。
实例缔造者的原型对象上
vm【Vue实例】===》Vue【实例缔造者】===》再往上就是原型对象
2. @XXX与简单语句
@XXX指的是事件绑定中的事件名，比如click、scroll、wheel等
正常来说，@click会直接跟一个回调函数的，比如@click='showInfo()'，但是，如果回调函数的内容特别简单，只有一句话，可以直接将这句话写到@click中，就是说，@click也是可以写语句的，如果回调函数内容比较多，各语句之间用';'分隔，但不建议这么做
3. 哪些函数属于Vue管理的函数？
总的来说，只要是Vue实例配置项下的函数【methods、computed、watch等】以及直接调用vm设置的函数【vm.$watch()等】都属于Vue管理的函数
模板字符串
一些常用的API
Math.random()：生成一个0到1之间的数，包含0但不包含1
Math.random()*3：生成一个0到3之间的数，包含0但不包含3
Math.floor()：向下取整
str1.indexOf(str2)：str1中是否包含子串str2，不包含返回-1，包含返回索引值
str1.search(str2)：str1中是否包含子串str2，不包含返回-1，包含返回索引值
arr.shift()：移除数组中的第一个元素
arr.unshift()：从数组头部插入一个元素
arr.push()：向数组尾部追加一个元素
arr.pop()：从数组尾部删除一个元素
arr.splice()：替换/删除掉数组中指定位置的某个元素
arr.reverse()：反转数组
arr.filter(function(p))：过滤出arr中符合条件的数据，符合条件的留下
p为arr中的每个元素，参数function返回一个boolean值，filter返回由boolean值为true的元素组成的新数组
不会改变原数组，会返回一个新数组
arr.sort(function(a, b))：为数组arr调用函数进行排序
arr.sort((a, b)=>{ return a-b }) // 前-后，升序
arr.sort((a, b)=>{ return b-a }) // 后-前，降序
arr.findIndex(function(item, index){return true/false})：返回数组中第一个满足条件的索引(从0开始), 不满足返回-1
item：数组中的每一条数据
index：当前item的索引
arr.forEach(function(item, index, s))：遍历数组中的每个元素，每个遍历到的元素都会被传入方法
item：数组中的每一条数据
index：当前item的索引
s：arr本身
arr.reduce(function(pre, current){}, initialValue)：条件统计
function(pre, current){}：每次执行后的返回值作为下一次函数调用时pre参数的值
initialValue：指定后，该值将作为第一次执行函数时pre参数的值，current参数的值为arr第一个元素的值；不指定，第一次执行函数时pre参数的值为arr第一个元素的值，current参数的值为arr第二个元素的值
最后一次调用函数的返回值作为reduce函数最终的返回值
JSON.stringify()：将js对象转换为JSON字符串
Date.now()：获取当前时间的时间戳
console.dir()：输出元素的所有属性和方法
input标签的autofocus 属性：自动获取焦点，并不是所有浏览器都支持
DOM操作API
element.focus()：element元素获取到焦点
document.querySelector(css_selector)：返回页面中匹配指定CSS 选择器的第一个元素，css_selector为CSS选择器
document.querySelector(css_selector).innerText：返回标签中的文本
通过video标签引入的视频不可播放，添加controls属性即可
opacity：设置不透明度
opacity：1
debugger：卡一个断点，程序执行到当前行会停住，不开控制台断点是不会生效的
typeof：查看某个变量的类型
假设age是一个字符串，age*1的结果就是数字，因为age*1伴随着强制类型转换
confirm('确定要删除吗？')：返回值为true/false
对于前端，数组和对象的API很重要
JS中&&（与）和||（或）操作符的返回值
其实就是返回决定他是true还是false的那个操作数
||和&&不是返回条件判断的结果【并不是直接返回true和false】，而是返回他们其中一个操作数的值
1） ||（或）【一真得一，一假得二】
- 如果第一个操作数为真，返回第一个操作数的值
- 如果第一个操作数为假，返回第二个操作数的值
注：经常用来判断一个变量是否已定义，如果没有定义就给他一个初始值
2）&&（与）【一真得二，一假得一】
- 如果第一个操作数为真，返回第二个操作数的值
- 如果第一个操作数为假，返回第一个操作数的值
参考网站：js 与或运算符 || && 妙用
js中的false：0、""、null、false、undefined、NaN等
条件判断是否为真时通过 if(!!attr) 【!!的作用是把一个其他类型的变量转成的bool类型】代替 if(attr)
对象（{}）身上常用的API
obj.hasOwnProperty('属性名')：判断obj身上有没有指定的属性
读取对象中的属性，比如，读取a，{c:5}
中的c属性，可以通过a.c和a['c']的方式读取
NaN的含义：Not a Number，不是一个合法的值
ES6 语法
{...info, ...dataObj}：info和dataObj都是对象，最后的结果中，如果是info和dataObj都有的元素就以dataObj中的元素为主；如果是info中有，dataObj中没有的，就以info的为主，说白了就是不变的不动，仅替换变了的。
解构赋值
当执行到import语句时，会先执行导入文件的代码，然后再继续向下执行当前文件的代码
...info：info是一个对象，比如{a:1,b:2}，该表达式的值就是a:1,b:2
一些常用的事件
@click：点击事件
@submit：表单提交事件
<body>
<!-- 准备好一个容器-->
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
密码：<input type="password" v-model="userInfo.password"> <br/><br/>
年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
爱好：
学习<input type="checkbox" v-model="userInfo.hobby" value="study">
打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
<br/><br/>
所属校区
<select v-model="userInfo.city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select>
<br/><br/>
其他信息：
<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
el:'#root',
data:{
userInfo:{
account:'',
password:'',
age:18,
sex:'female',
hobby:[],
city:'beijing',
other:'',
agree:''
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo))
}
}
})
</script>
@blur：焦点消失事件，常用于输入框
Vue指令工作的步骤
-
指令与元素的绑定
这一步仅仅是在内存里面建立了指令与元素之间的关系，元素此时还没有被放到页面上
模板是不能直接放到页面上的，模板需要经过Vue的解析之后才能放到页面上
标签：返回,arr,Vue,函数,二十,元素,2x,数组 From： https://www.cnblogs.com/wzzzj/p/18045289