vue杂记

vue杂记：
以下是我记录自己学习vue过程中的笔记，可能有些零碎、有些无头绪。

所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
vue实例：
1、创建实例
var vm=new Vue({
})
2、数据与方法
var data={a:1}
var vm=new Vue({
data:data
})
vm.a==data.a. //true
当这些数据改变时，试图会进行重渲染。值得注意只有当实例被创建时就已经存在于data中的property才是响应式的。也就是说如果添加一个新的proproty，vm.b=‘hi’，那么对b的改动不会处罚任何视图的更新。如果占位，一开始为空或不存在，那么需要设置一些初始值。
data:{
newTodoText: ‘’,
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}

模板语法：
一、插值
#文本{{msg}}
#原始HTML

Using mustaches: {{ rawHtml }}

Using v-html directive:

#attribute

#使用js表达式
{{number+1}}
{{ok?‘yes’:‘no’}}

以下的不对，　{{var a=1}}. {{if(ok){return message}}}
二、指令
#参数
一些指令能够接受一个‘参数‘，…
…
#动态参数

v-for
用v-for把一个数组对应为一组元素

在这里插入代码片
<ul id='exapmle‘>
	<li v-for='item in items'. :key='item.message>{{item.message}}</li>
</ul>
var example1=new Vue({
el:'#example-1',
data:{
items:[
{message:'Foo'},
{message:'Bar'}
]
}
})


v-for还支持一个可选的第二个参数，
<ul id='exapmle-2‘>
	<li v-for='（item，*index*） in items'. :key='item.message>
	{{parentMessage}}-{{index}}-{{item.message}}
	</li>
</ul>
var example1=new Vue({
el:'#example-2‘,
data:{
parentMessage:'parent',
items:[
{message:'Foo'},
{message:'Bar'}
]
}
})

在v-for里使用对象

  <ul id='v-for-object' class='demo'>
	<li v-for='value in object'>
	{{value}}
</li>
</ul>

new Vue({
el:'#v-for-object',
data:{
	object:{
	title:'How to do',
	author:'wang',
	at:'2021-8-23'
	}
}
})

也可以使用第二个参数
  <ul id='v-for-object' class='demo'>
	<li v-for='（value ，name)in object'>
	{{name}}:{{value}}
</li>
</ul>

还可以用第三个参数
  <ul id='v-for-object' class='demo'>
	<li v-for='（value，name,index） in object'>
	{{index}}.{{name}},{{value}}
</li>
</ul>