Vue学习笔记(一) P1~P12

最新推荐文章于 2022-02-12 22:12:17 发布

运妙心藏

最新推荐文章于 2022-02-12 22:12:17 发布

阅读量381

点赞数 1

分类专栏： Vue 文章标签： Vue Vue.js

本文链接：https://blog.csdn.net/u010921682/article/details/102600571

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

hello, Vue.js!

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

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

在这里插入图片描述
注:

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

在这里插入图片描述
注:

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>

在这里插入图片描述

注:

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

在这里插入图片描述
MVVM: Model View ViewModel
Model <=> ViewModel <=> View

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

根据上面的案例计数器来看MVVM
在这里插入图片描述

Vue的options选项

1. el

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

2. data

3. functions

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

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>

在这里插入图片描述
注:

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的计算属性 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>

在这里插入图片描述

运妙心藏

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记(一) P1~P12

hello, Vue.js!<div id="app"> <h2>{{message}}</h2></div><script> const vm = new Vue({ el: "#app", data: { message: "hello world!", } })</script>注...
复制链接

扫一扫

专栏目录