vuejs学习笔记（一），直接引入vue.js

68 阅读 0 评论 45 点赞

我是靠谱客的博主多情外套，最近开发中收集的这篇文章主要介绍vuejs学习笔记（一），直接引入vue.js，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

声明式渲染：

<!DOCTYPE >
<html>
	<head>
		<title>声明式渲染</title>
	</head>
	<style>
		
	</style>
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		
	<body>
		<div id="app">
		  {{message}}
		  <br>
		  <span v-bind:title="title"><!--"v-bind:"为属性指令，为vue所特有指令-->
			Hover your mouse over me for a few seconds to see my dynamically bound title!
		  </span>
		</div>
		
		<script>
			var str=[];
			str[0]='hello word';
			str[1]='You loaded this page on';
			var app = new Vue({
			  el: '#app',
			  data: {
				  message:str[0],
				  title:'pageon' + new Date(),
				  /*通过el相应的id获取容器，通过data逐项为相应的参数赋值，所赋值可为变量（可通过ajax获取值，进行页面的渲染）*/
			  }
			})
		</script>
	</body>
</html>

条件与循环：

1、条件

<p v-if="seen">Now you see me</p>

为相应的标签设置“v-if”指令，通过设置变量‘seen’的值true或者false来控制元素显示与否。

设置变量直接设置true或者false，无需设置为字符串形式。

2、循环

<div id="app-4">
    <ul>
	    <li v-for="todo in tods"><!--前一变量与下面数组变量一致，in后的内容为data变量-->
	        {{ todo.text }}
		</li>
	</ul>
</div>
		
<script>
	var app4 = new Vue({
		 el: '#app-4',
		 data: {
			tods: [
			    { text: 'Learn JavaScript' },
			    { text: 'Learn Vue' },
			    { text: 'Build something awesome' }
			]
		}
	})
</script>

处理用户输入：

用 v-on 指令绑定一个监听事件用于调用定义的方法。

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
<script>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
<script>

注：

1、split() 方法用于把一个字符串分割成字符串数组。split（''）表示将字符串分解为单个字符（包含空格）。

2、reverse()颠倒数组中元素的顺序

3、join() 方法用于把数组中的所有元素放入一个字符串。

v-model 指令，它使得在表单输入和应用状态中做双向数据绑定

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

<script>
	var app6 = new Vue({
	  el: '#app-6',
	  data: {
		message: 'Hello Vue!'
	  }
	})
</script>

根据输入的数值，实时变化显示的数值。