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的了

 

posted @ 2021-10-28 14:39  Kaffee  阅读(39)  评论(0编辑  收藏  举报