Vue学习笔记 01
开始学习前端，Vue，React，之后会考虑学习UX/UI吧。
初学Vue 模板 非单文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<school></school>
</div>
</body>
<script type="text/javascript">
//组件
let school = Vue.extend({
template:`
<div>
<h1>{{name}}</h1>
<h1>{{address}}</h1>
</div>
`,
data(){
return{
name:"斯坦福大学",
address:"Stanford Street"
}
}
})
//容器
let app = new Vue({
el:"#app",
components:{
school:school
}
})
</script>
</html>
容器和Vue实例是一一对应
插值语法：
{{ }}里必须是js表达式
指令语法：
<a v-bind:href="url"> 指令语法都是v- 开头的
v-if， v-model
此时被：包裹的这个字符串里的引号里的 url 当做表达式使用
简写形式
v-bind: ===> :
vue实例例子
new Vue({
el:"",
data:{
prop1:"",
prop2:"",
school:{
address:"",
name:""
}
}
})
数据绑定
单向绑定 v-bind:
双向绑定 v-model:
<input type="text" v-bind:value="name">
<input type="text" v-model:value="name">
简写
<input type="text" :value="name">
<input type="text" v-model="name">
el 与 data的两种写法
el第一种写法
let v = new Vue({
el:"#root",
data:{
.....
}
})
el第二种写法
let v = new Vue({ data:{ ... }, v.$mount('#root') //第二种写法 })
//也可以这么写
...
setTimeout({
v.$mount('#root')
},1000);
...
data的第一种写法
let v = new Vue({
el:"#root",
data:{
.....
}
data的第二种写法(vue 组件里必须使用该方法)
let v = new Vue({
el:"#root",
data:function(){
return{
name:"albus"
...
}
}
注意点
data函数必须是普通函数，不可以是箭头函数。
data:()=>{} ❌ 这样写，data就没有自己的this，箭头函数没有自己的this。
注意！😊由Vue管理的函数，一定不要写成箭头函数，一旦写成箭头函数，this就不是vue实例的了。而是Window的了
