Vue学习笔记(一) P1~P12

文章目录

    • hello, Vue.js!
    • v-for 遍历
    • 案例:计数器
    • MVVM
    • Vue的options选项
      • 1. el
      • 2. data
      • 3. functions
    • Vue的生命周期
    • 模板
    • Mustache

hello, Vue.js!

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

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

Vue学习笔记(一) P1~P12_第1张图片
注:

  1. 了解const let var 三者的区别
    const vm …
    let vm …
    var vm …
  2. el 根据 id [app]绑定元素 div
  3. data 填充数据, 如message
  4. {{ }} 可以直接使用 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学习笔记(一) P1~P12_第2张图片
注:

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

案例:计数器

<body>
	<div id="app">
		<h2>当前计数: {{counter}}h2>
		
		
		<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学习笔记(一) P1~P12_第3张图片
Vue学习笔记(一) P1~P12_第4张图片
注:

  1. v-on:click 简写为 @click,代码中注释部分也是可以使用的,只是没有log而已
  2. v-on:click 可以直接写变量(counter++) ,也可以直接写函数(add)
  3. methods 可以写多个函数
  4. 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学习笔记(一) P1~P12_第5张图片
MVVM: Model View ViewModel
Model <=> ViewModel <=> View

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

根据上面的案例计数器来看MVVM
Vue学习笔记(一) P1~P12_第6张图片

Vue的options选项

1. el

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

2. data

3. functions

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

Vue的生命周期

Vue生命周期图示
Vue学习笔记(一) P1~P12_第7张图片


Vue学习笔记(一) P1~P12_第8张图片
注:

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

模板

待补


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学习笔记(一) P1~P12_第9张图片

如果表达式太长,可以移到 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学习笔记(一) P1~P12_第10张图片

你可能感兴趣的:(Vue,Vue,Vue.js)