VUE入门1-基础篇

最新推荐文章于 2023-04-06 16:58:31 发布

鲸鱼漫步

最新推荐文章于 2023-04-06 16:58:31 发布

阅读量72

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_42108319/article/details/105073135

版权

VUE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

工作下游用团队到了vue，所以无事的时候网上学习。仅以此篇作为学习记录。

<html>
	<header>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</header>
	<body>
	
		<!-- 将数据绑定在DOM文本上 -->
		<div id="app">
		{{ message }}
		</div>
		
		<!-- 指令->vue　attribute 应用特殊的响应式行为 -->
		<!-- 将数据绑定在属性上 v-bind:[html_attr]-->
		<div id="app-2">
			<span v-bind:title='message'>
			touch me
			</span>
		</div>
		
		<!-- 将数据绑定在DOM结构上 -->
		<!-- 分支 v-if='[data]'-->
		<div id="app-3">
			<span v-if='see'>
				{{message}}
			</span>
		</div>
		
		<!-- 循环 v-for='local_var in [data]'-->
		<div id='app-4'>
			<ul v-for ='todo in todos'>{{todo.text}}</ul>
		</div>
		
		<!-- 添加一个事件监听器 v-on:[html_event]='[methods]' -->
		<div id="app-5">
			 <p>{{ message }}</p>
			 <button v-on:click="reverseMessage">反转消息</button>
		</div>

		<!-- 表单输入和应用状态之间的双向绑定: v-model -->
		<div id="app-6">
			 <p>{{ message }}</p>
			 <input v-model="message">
		</div>
		
		<!-- vue 组件 -->
		<!-- 一个组件本质上是一个拥有预定义选项的一个 Vue 实例 -->
		<div id="app-7">
			<ol>
				<!-- 使用自定义的组件 todo是自定义属性 key？？-->
				<todo-item v-for='item in groceryList' v-bind:key='item.id' v-bind:todo='item'></todo-item>
			</ol>
		</div>

		</body>
	<script>
		
		var app=new Vue({
			el:'#app',
			data:{message:'hello vue'}
		})
		//响应式的
		//app.message='hello world'
		//app.$data.message='hello tony'
		
		var app2=new Vue({
			el:'#app-2',
			data:{message:'you touch me !'}
		})
		
		var app3=new Vue({
			el:'#app-3',
			data:{message:'you see me !',see:true}
			
		})
		
		var app4=new Vue({
			el:'#app-4',
			data:{todos:[
				{text:'VUE'},
				{text:'VBA'},
				{text:'VCC'}
			]}
		})
		app4.todos.push({ text: '新项目' })
		
		var app5=new Vue({
			el: '#app-5',
			data: {
				message: 'Hello Vue.js!'
			},
			methods: {
				reverseMessage: function () {
					this.message = this.message.split('').reverse().join('')
				}
			}
		})
		
		var app6=new Vue({
			el:'#app-6',
			data:{message:''}
		})
		
		//定义了一个组件
		Vue.component('todo-item', {
			props: ['todo'],
			template: '<li>{{ todo.text }}</li>'
		})
		
		var app7=new Vue({
			el:'#app-7',
			data: {
				groceryList: [
					{ id: 0, text: '蔬菜' },
					{ id: 1, text: '奶酪' },
					{ id: 2, text: '随便其它什么人吃的东西' }
				]
			}
		})		
		
	</script>
</html>

<html>
	<header>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</header
	<body>
		<div id="app">
			<p>{{a}}</p>
		</div>
	</body>
	<script>
	// 我们的数据对象
	var data = { a: 1 }
	// Object.freeze() 这会阻止修改现有的属性
	//Object.freeze(data)
	//  Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统
	var vm = new Vue({
		el:'#app',
		data: data,
		updated: function () {
		// `this` 指向 vm 实例
		console.log('updated a is: ' + this.a)
		},
		created: function () {
		// `this` 指向 vm 实例
		console.log('created a is: ' + this.a)
		}
		})
	
	// $watch 是一个实例方法
	vm.$watch('a', function (newValue, oldValue) {
	// 这个回调将在 `vm.a` 改变后调用
	console.log('watch a : '+oldValue+'->' + newValue)
	})
	
	//值发生改变时，视图将会产生“响应”
	data.a = 3
	</script>
</html>

<html>
	<header>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</header>
	<body>
	<div id='app'>
	<!-- Mustache 语法 -->
		<span >这个将会改变: {{ msg }}</span>
		<span v-once>这个将不会改变: {{ msg }}</span><br>
		<span v-html='msg'>html</span>
	
	<!-- 支持JS表达式，不支持语句 -->
		<span >{{ msg.split('').reverse().join('') }}</span>
	
	<!-- 支持[动态参数] 指令参数是冒号之后的 -->	
		<a v-on:[event]="doSomething"> ... </a>
	
	<!-- 指令参数是冒号之后的 -->	
		<a v-on:[event]="doSomething"> ... </a>
		
	<!-- 指令缩写 -->
		<!-- v-on -->
		<a @[event]="doSomething"> ... </a>
		<!-- v-bind -->
		<a :[key]="url"> ... </a>
	</div>
	</body>
	<script>
	var app = new Vue({
		el:'#app',
		data:{msg:'<b>hello</b>',url:'baidu.com',key:'href',
		event:'click',doSomething:function(){console.log('')}}
	});

	</script>
</html>

<html>
	<header>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</header>
	<body>
		<div id="example">

			<p>Original message: "{{ message }}"</p>
			<p>Reversed message: "{{ now1() }}"</p>
			<p>Reversed message: "{{ now }}"</p>
			<!-- 计算属性 -->
			<p>Computed reversed message: "{{ reversedMessage }}"</p>
			
			<!-- 方法 -->
			<p>Reversed message: "{{ reversedMessage1() }}"</p>
			
			<!-- 方法：重计算 -->
			<p>Reversed message: "{{ now1() }}"</p>
			
			<!-- 计算属性：不重计算 -->
			<p>Reversed message: "{{ now }}"</p>
			
		</div>
	</body>
	<script>
		var vm = new Vue({
		  el: '#example',
		  data: {
			message: 'Hello'
		  },
		  computed: {
			// 计算属性的 getter
			reversedMessage: function () {
			  // `this` 指向 vm 实例
			  return this.message.split('').reverse().join('')
			},
			//关响应式依赖(属性)发生改变时它们才会重新求值
			//计算属性会立即返回之前的计算结果，而不必再次执行函数
			  now: function () {
				return Date.now()
			}
		  },
		  methods: {
			  reversedMessage1: function () {
				return this.message.split('').reverse().join('')
			  },
			  //每当触发重新渲染时，调用方法将总会再次执行函数
			  now1: function () {
				return Date.now()
			  }
			}
		  }
		)
		console.log(vm.reversedMessage) // => 'olleH'
		vm.message = 'Goodbye'
		console.log(vm.reversedMessage) // => 'eybdooG'
	</script>
</html>

<html>
	<header>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</header>
	<body>
		<div id="demo">{{ fullName }}</div>
		<div id="demo2">{{ fullName }}</div>
	</body>
	<script>
	/*
	var vm = new Vue({
	  el: '#demo',
	  data: {
		firstName: 'Foo',
		lastName: 'Bar',
		fullName: 'Foo Bar'
	  },
	  watch: {
		firstName: function (val) {
		  this.fullName = val + ' ' + this.lastName
		},
		lastName: function (val) {
		  this.fullName = this.firstName + ' ' + val
		}
	  }
	})
	*/
	//上面代码是命令式且重复的。将它与计算属性的版本进行比较：
	var vm = new Vue({
	  el: '#demo',
	  data: {
		firstName: 'Foo',
		lastName: 'Bar'
	  },
	  computed: {
		fullName: function () {
		  return this.firstName + ' ' + this.lastName
		}
	  }
	})
	//算属性默认只有 getter，不过在需要时你也可以提供一个 setter
	var vm2 = new Vue({
	  el: '#demo2',
	  data: {
		firstName: 'Foo2',
		lastName: 'Bar2'
	  },
	  computed: {
		fullName:{
			get:function () {
			  return this.firstName + ' ' + this.lastName
			},
			set:function (newValue) {
			  var names = newValue.split(' ')
			  this.firstName = names[0]
			  this.lastName = names[names.length - 1]
			}
			
		}
	  }
	})
	
	</script>
</html>

<html>
	<header>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
	</header>
	<body>
		<!-- 数据变化时执行异步或开销较大的操作时 -->
		<div id="watch-example">
		  <p>
			Ask a yes/no question:
			<input v-model="question">
		  </p>
		  <p>{{answer}}</p>
		</div>
	<script>
		var watchExampleVM = new Vue({
		  el: '#watch-example',
		  data: {
			question: '',
			answer: 'I cannot give you an answer until you ask a question!'
		  },
		  watch: {
			// 如果 `question` 发生改变，这个函数就会运行
			question: function (newQuestion, oldQuestion) {
			  this.answer = 'Waiting for you to stop typing...'
			  this.debouncedGetAnswer()
			}
		  },
		  created: function () {
			// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
			// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
			// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
			// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
			// 请参考：https://lodash.com/docs#debounce
			this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
		  },
		  methods: {
			getAnswer: function () {
			  if (this.question.indexOf('?') === -1) {
				this.answer = 'Questions usually contain a question mark. ;-)'
				return
			  }
			  this.answer = 'Thinking...'
			  var vm = this
			  axios.get('https://yesno.wtf/api')
				.then(function (response) {
				  vm.answer = _.capitalize(response.data.answer)
				})
				.catch(function (error) {
				  vm.answer = 'Error! Could not reach the API. ' + error
				})
			}
		  }
		})
	</script>
	</body>
</html>

<html>
<header>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</header>

<body>
    <div class="static" v-bind:class="{ 'active': isActive, 'text-danger': hasError }"></div>
    <div id='app1' v-bind:class="classObject"></div>
    <div id='app2' v-bind:class="classObject"></div>
    <div id='app3' v-bind:class="[activeClass, errorClass]"></div>
    <div id='app4' v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    <div id='app5' v-bind:class="[{ active: isActive }, errorClass]"></div>


</body>
<script>
    //<div class="static active"></div>
    //对象语法
    var vue = new Vue({
        el: '.static',
        data: {
            isActive: true,
            hasError: false
        }
    })

    //绑定的数据对象不必内联定义在模板里
    var app1 = new Vue({
        el: '#app1',
        data: {
            classObject: {
                active: true,
                'text-danger': false
            }
        }
    })

    //绑定一个返回对象的计算属性
    var app2 = new Vue({
        el: '#app2',
        data: {
            isActive: true,
            error: null
        },
        computed: {
            classObject: function() {
                return {
                    active: this.isActive && !this.error,
                    'text-danger': this.error && this.error.type === 'fatal'
                }
            }
        }
    })
    app2.error = {
        type: 'fatal'
    };

    //把一个数组传给 v-bind:class
    var app3 = new Vue({
        el: '#app3',
        data: {
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    });

    //三元表达式
    var app4 = new Vue({
        el: '#app4',
        data: {
            isActive: true,
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    });

    var app5 = new Vue({ 
        el: '#app5',
        data: {
            isActive: true,
            errorClass: 'text-danger'
        }
    });

</script>

</html>

鲸鱼漫步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE入门1-基础篇

工作下游用团队到了vue，所以无事的时候网上学习。仅以此篇作为学习记录。<html> <header> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </header> <body> <!-- 将数据绑定在...
复制链接

扫一扫

专栏目录