VUE-2.X学习笔记Day1

前言

我使用的HbuilderX开发工具,里面有一键创建vue项目.
JS控制台:
1. edge浏览器:F12之后
2. google浏览器:F12之后

安装方法

1. 直接下载vue.js进行使用
2. 开发环境引入JS:

简单介绍

1. 声明式渲染

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

我们在使用VUE的时候,不再去跟HTML进行交互,而是通过ID(#app)进行进行控制属性

2.绑定元素

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

鼠标放到字体上面时,会有类似备注的提示.无法截图展示
我们还可通过JS控制台来改变他们的属性(当然app1也是可以的)

3.条件与循环

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

可以通过JS控制台来改变属性让他消失–>app3.seen=false

4.循环

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4= new Vue({
	el:'#app-4',
	data:{
		todos:[
			{ text: '学习JS'},
			{ text: '学习JAVA'},
			{ text: '学习VUE'}
		]
	}
})

JS控制台内输入–>app4.todos.push({ text: '内容 })–可以添加新的属性

5.交互

	<div id="app-5">
			<p>{{ message }}</p>
			<button v-on:click="buttonAA">翻转消息</button>
		</div>

var app5=new Vue({
	el:'#app-5',
	data:{
		message:"rainIsByYu"
	},
	methods:{
		buttonAA:function(){
			this.message=this.message.split('').reverse().join('')
		}
	}
})

6.双向绑定

<div id="app-6">
		<p>{{message}}</p>
		<input v-model="message">
</div>

var app6= new Vue({
	el:'#app-6',
	data:{
		message : 'hello,Wolrd,Vue!'
	}
})

通过js控制台可以直接同时修改

7.组建化应用构建

1. 简单应用

创建组建

Vue.component('todo-item', {
	template: '<li>这是一个待办项</li>'
})

var app = new Vue({
	el: "#app-7",
})

前端DOM(组建实例)

<div id="app-7">
	<ol>
		<todo-item></todo-item>
	</ol>
</div>

2.优化实现

Vue.component('todo-item', {
	props:['todo'],//添加一个自定义属性
	template: '<li>{{todo.name}}</li>'
})

var app = new Vue({
	el: "#app-7",
	data:{
		datalist:[
			{id:0,name:'java'},
			{id:1,name:'vue'},
			{id:2,name:'php'},
		]
	}
})

<div id="app-7">
			<ol>
				<todo-item 
				v-for="data in datalist"
				v-bind:todo="data"
				v-bind:key="data.id"
				></todo-item>
			</ol>
		</div>

实例属性

1. 创建实例

2.数据与方法

1.视图的响应

1. 新建一个数据对象

var data = {
	key1: 'value1',
	key2: 'value2'
}

2. 将对象放入示例当中

var app = new Vue({
	el:'#app',
	data: data
})

<div id="app">
		key1 :<span>{{key1}}</span><br/>
		key2 :<span>{{key2}}</span><br/>
		key3 :<span>{{key3}}</span><br/>
	</div>

3. 效果图
   
   预留key3是为了接下来的操作

4. 响应

   1. 当你新建属性是.页面是不存在刷新的–>app.key3=‘v3’
      
   2. 修改原有属性则会刷新页面–>app.key2=‘v2’
      
   3. 如果你需要在晚些时候会新增属性,那么你需要设置一些初始值 可以方式报错,也可以立即刷新–>app.key3=‘v3’

   

   4. 当你想让初始值固定时,不想让它进行修改–>Object.freeze(obj)
      
      当你修改时: Cannot assign to read only property 'key3' of object '#<Object>'
      

5. 实例方法–>$watch
   

3. 实例生命周期钩子

1.介绍

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

2.钩子created

当创建vue实例时执行的钩子

var app1 =new Vue({
	el:'#app',
	data:{
		key1:'v1',
		key2:'v2',
	
	},
	created:function(){
		alert(111);
	}
})

3.其他

其他钩子:

1. mounted
2. updated 和
3. destroyed
4. this

不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或
vm.$watch(‘a’, newValue => this.myMethod())。因为箭头函数并没有 this，this
会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property
of undefined 或 Uncaught TypeError: this.myMethod is not a function
之类的错误。

生命周期图示:点击跳转

实例 property方法

1. vm.$data:Vue 实例观察的数据对象.Vue 实例代理了对其 data 对象 property 的访问
2. vm.$el:Vue 实例使用的根 DOM 元素
3. vm.$watch:Vue实例方法数据

vue属性

1. {{字段名称}}:声明一个属性字段用来赋值及其他操作
2. v-bind:属性
3. v-if:条件
4. v-for:“todo in todos”,类似于 forecah中的 对象:对象集合
5. v-on:click:按钮监听
6. v-model:表单输入绑定

结尾

参考文章:Vue中文文档
持续更新