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" :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 阅读(44) 评论(0) 收藏举报

刷新页面返回顶部

Kaffee

Vue学习笔记 01

公告