vue学习合集

vue声明与渲染

<div id="app">
		<!-- 声明渲染 -->
		<h2>{{message}}</h2>
		<p v-bind:title="newmessage">
			查看
		</p>
		<!-- 条件与循环 -->
		<p v-if="seen">  
			you well be look me
		</p>
		   <!-- 循环生成li -->
		  <ol>
		    <li v-for="todo in todos">
		      {{ todo.text }}
		    </li>
		  </ol>
		  <!-- 循环生成div -->
		  <div v-for="(item,index) in viewarr">
			  <!-- <div id="gad(index)"></div> -->
			  <div>{{item.name}}</div>
		  </div>
		  <!-- 事件绑定 -->
		  <button type="button" v-on:click="reversemessage">点击</button>
		  <br>
		  <!-- v-model双向数据绑定 -->
		  <input type="text" v-model="message">
		  
		  <!-- 注册一个新组建 -->
		  <ul>
		    <!-- 创建一个 todo-item 组件的实例 -->
		    <todo-item
		     v-for="item in groceryList"
		     v-bind:vlues="item"
		     v-bind:key="item.id">
			</todo-item>
		  </ul>
	</div>

	// 定义名为 todo-item 的新组件
	Vue.component('todo-item', {
	  props: ['vlues'],	
	  template: '<li style="color: red;">{{vlues.text}}</li>'
	})
	var app =new Vue({
		el:"#app",
		data:{
			message:"hello vue !",
			newmessage:'页面加载于'+ new Date().toLocaleString(),
			seen:true,        //设置seen的默认条件
			 groceryList: [
			      { id: 0, text: '蔬菜' },
			      { id: 1, text: '奶酪' },
			      { id: 2, text: '随便其它什么人吃的东西' }
			    ],
			todos: [
			      { text: '学习 JavaScript' },
			      { text: '学习 Vue' },
			      { text: '整个牛项目' }
			    ],
			viewarr: [
				{ name: '第一次'},
				{ name: '第二次' },
				{ name: '第三次'}
			],			
		},
		methods:{
			reversemessage:function(){
				 this.message = this.message.split('').reverse().join('')
			},
		}
	})