Vue学习笔记(一)

程序员文章站 2022-06-14 22:34:20

...

hello, Vue.js!

<div id="app">
	<h2>{{message}}</h2>
</div>

<script>
	const vm = new Vue({
		el: "#app",
		data: {
			message: "hello world!",
		}
	})
</script>

Vue学习笔记(一)
注:

了解const let var 三者的区别
const vm …
let vm …
var vm …
el 根据 id [app]绑定元素 div
data 填充数据, 如message
{{ }} 可以直接使用 Vue里的变量

v-for 遍历

<body>
	<div id="app">
		<h2>{{message}}</h2>
		<h3>{{movies}}</h3>
		<ul>
			<li v-for="item in movies">{{item}}</li>
		</ul>
	</div>
</body>

<script>
	const vm = new Vue({
		el: "#app",
		data: {
			message: "hello world!",
			movies: ['柯南', '星际穿越', '大话西游', '盗梦空间']
		}
	})
</script>

Vue学习笔记(一)
注:

v-for 就是一个遍历
data 中不仅可以写普通的字段,还可以是数组

案例:计数器

<body>
	<div id="app">
		<h2>当前计数: {{counter}}</h2>
		<!-- <button v-on:click="counter++">+</button> -->
		<!-- <button @click="counter--">-</button> -->
		<button v-on:click="add">+</button>
		<button @click="sub">-</button>
	</div>
</body>

<script>
	const vm = new Vue({
		el: "#app",
		data: {
			counter: 0
		},
		methods: {
			add: function() {
				console.log("add ++");
				this.counter++;
			},
			sub: function() {
				console.log("sub --");
				this.counter--;
			}
		}
	})
</script>

Vue学习笔记(一)

注:

v-on:click 简写为 @click,代码中注释部分也是可以使用的,只是没有log而已
v-on:click 可以直接写变量(counter++) ,也可以直接写函数(add)
methods 可以写多个函数
this. 可以直接调用data中的数据字段, 这里使用了proxy代理的技术才能调用到
例如,我们使用obj, this也能直接使用counter

<script>
	const obj = {
		counter: 0
	}
	
	const vm = new Vue({
		el: "#app",
		data: obj,
		methods: {
			add: function() {
				console.log("add ++");
				this.counter++;
			},
			sub: function() {
				console.log("sub --");
				this.counter--;
			}
		}
	})
</script>

MVVM

Vue学习笔记(一)
MVVM: Model View ViewModel
Model <=> ViewModel <=> View

Model >> JavaScript: Objects(data)
View >> DOM
ViewModel >> Vue

根据上面的案例计数器来看MVVM
Vue学习笔记(一)

Vue的options选项

1. el

// 1
el: "#app"
// 2
el: document.querySelector("#app")
// 也可以写成,两者都可以,但前者更简洁

2. data

3. functions

可以定义多个函数
在JS中有老师解释说, 在类或对象中定义的叫方法,其它的叫函数,这个观点对于我C++过来的人不赞成这个观点

Vue的生命周期

Vue生命周期图示
Vue学习笔记(一)

<script>
	const obj = {
		counter: 0
	}

	const vm = new Vue({
		// el: "#app",
		el: document.querySelector("#app"),	
		data: obj,
		methods: {
			add: function() {
				console.log("add ++");
				this.counter++;
			}
		},
		beforeCreate:function(){
				console.log("beforeCreated...");
		},
		created: function() {
			console.log("created...");
		},
		mounted: function() {
			console.log("mounted...");
		}
	})
</script>

Vue学习笔记(一)
注:

created: 一般网络请求数据,然后将请求到的数据放到data中,data会将数据展示在我们的页面中
上面生命周期图流程中的红色方法都是可以调用,其代表每个阶段的完成前与完成后

模板

Mustache

mustache不仅可以直接写变量, 也可以直接写简单的表达式

<div id="app">
	<h2>{{message}}</h2>
	<h2>{{message}}, 李银河!</h2>
	<h2>{{firstname + lastname}}</h2>
	<h2>{{firstname + ' ' + lastname}}</h2>
	<h2>{{firstname}} {{lastname}}</h2>
	<h2>{{counter * 2}}</h2>
</div>

<script src="js/vue.js"></script>
<script>
	const vm = new Vue({
		el: "#app",
		data: {
			message: "你好啊",
			firstname: "Kobe",
			lastname: "bryant",
			counter: 100
		}
	})
</script>

Vue学习笔记(一)

如果表达式太长,可以移到 Vue的计算属性 computed: 中计算,如下例:

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

Vue学习笔记(一)

Vue学习笔记(一)

hello, Vue.js!

v-for 遍历

案例:计数器

MVVM

Vue的options选项

1. el

2. data

3. functions

Vue的生命周期

模板

Mustache

记录vue项目中遇到的一点小问题

Vue源码学习之关于对Array的数据侦听实现

Vue.js构建你的第一个包并在NPM上发布的方法步骤

HTML5中的nav标签学习笔记

Python的装饰器用法学习笔记

java笔记学习之操作符

SQL 特殊语句(学习笔记)

mybatis学习笔记之mybatis注解配置详解

HTML5 video标签（播放器）学习笔记（二）:播放控制

HTML5 video标签（播放器）学习笔记（一）:使用入门