vueDemo Hbuild教程

目录

Hbuilid设置主题

Hbuilid设置自动保存

 生命周期

 v-html输出标准nheml

v-bind

 {{ message.split('').reverse().join('') }}

v-if​

vue methor​

多样式绑定

class 设置样式​

v-else-if

v-show​

 v-for​

v-on​

函数不需要初始化

 vue 双向绑定​

 ​placehold：占位，hint

 v-moudle​

input type="submit" 和"button"有什么区别​

属性必须用都好进行分隔

Hbuilid设置主题

Hbuilid设置自动保存

https://learning.dcloud.io/#/?vid=1

	
		
		
		
	
	
		

			{{ message }}
		

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

	

https://learning.dcloud.io/#/?vid=3

https://cn.vuejs.org/v2/guide/instance.html#数据与方法

 

 生命周期

	
		
		
		
	
	
		

			{{ a }}
			
		

		
			var data = {
				a: 1
			};
			var vm = new Vue({
				el: '#app',
				data: data
			});
			vm.$watch('a',function(newVal,oloVal){
				console.log(newVal,oloVal)
			})
			vm.$data.a="ew";
		

	

 

 

 v-html输出标准nheml

v-bind

	
		
		
		
	
	
		

			{{ a }}
			 123
			
 456
			
		

		
			var data = {
				a: 1,
				url:"www.baidu.com",
				color:"red",
			};
			var vm = new Vue({
				el: '#app',
				data: data
			});
			vm.$watch('a',function(newVal,oloVal){
				console.log(newVal,oloVal)
			})
			vm.$data.a="ew";
		
		
		.red {color: aqua;}
		
		

	

 {{ message.split('').reverse().join('') }}

v-if vue methor

多样式绑定

class 设置样式 v-else-if

	
		
		
		
	
	
		

			
1
			
2

			
3

			
4

			
Not

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

					type: 0
				}
			});
		
	

v-show  v-for

 

	
		
		
		
	
	
		

			

				
{{item.message}}
					
{{value}}
			

		
		
			var vm = new Vue({
				el: '#app',
				data: {
					items:[
						{message:"133"},
						{message:"233"},
						{message:"333"}
					],
					mm:{
						ce1:'ce1',
						ce2:'cd2',
						ce3:'ce3'
					}
				}
			});
		
	

v-on

函数不需要初始化

	
		
		
		
	
	
		

			点击次数:{{sum}}
			点击次数:{{sumFun}}
		
		
			var vm = new Vue({
				el: '#app',

				data: {
					sum: 0,
					sumFun: 0
				},
				methods: {
					fun: function(i,e) {
						i += i;
						alert(i)
						console.log("-----")
						console.log(e)
						console.log("-----")
						
						return i
					}
				}
			});
		

	

 vue 双向绑定

 placehold：占位，hint

 

 v-moudle

	
		
		
		
	
	
		

			
			contentOne
			
			
			contentTwo	
			
		
	        
			contentThree
			
			Message:
			{{Message}}
			
		
		
			var vm = new Vue({
				el: '#app',

				data: {
					Message:""
				},

			});
		

	

	
		
		
		
	
	
		

			
			contentOne
			
			
			contentTwo	
			
		
	        
			contentThree
			
			Message:
			{{Message}}
			
		
		
			var vm = new Vue({
				el: '#app',

				data: {
					Message:[]
				},

			});
		

	

input type="submit" 和"button"有什么区别

属性必须用都好进行分隔

 

组件和vue 对象的区别

组件data必须函数方式返回；

vue对象直接命名组件data 属性；

 

	
		
		
		
	
	
		


			
			
			
			ceshi
		
		
			Vue.component('name_componment', {

				data: function() {
					return {
						co: 0
					}
				},
				// data: {
				// 	co: 0
				// },
				methods: {
					add: function() {
						this.co++;
					}
				},

				template: ' 点击了{{co}}次'
			})
			var count = 0

			var vm = new Vue({
				el: '#app',

				data: {
					count: 5,
					ce: 4

				},
				methods: {
					adds: function() {
						this.$refs.ce.add()
						this.count++;
						alert(this.$refs.ce.co)
					},
				}
			});
		

	

 template 只加载一个模板

 

slot空间内加载html

vue emit 

	
		
		
		
	
	
		


			
		
		
			Vue.component('name_componment', {
				data: function() {
					return {
						co: 0
					}
				},
				methods: {
					add: function() {
						this.co++;
						this.$emit('clickadd', this.co);
					}
				},
				template: '
123 点击了{{co}}次slot
'
			})

			var vm = new Vue({
				el: '#app',
				methods: {
					clickNow: function(a) {
						alert(a);
					}
				}
			});
		

	

vue 组件变量定义

 组件全局注册 和局部注册

 

VUE 组件使用 

 

Hbuild +uniapp 插件