Vue常用总结

2017/09/05
原创 
挺好的,总结下,方便以后项目用
来点新潮的

上代码 Vue.html

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(person,index) in people">
                        <td v-on:click='show(person.id)' > </td>
                        <td v-on:click='show(person.id)' > </td>
                        <td v-on:click='show(person.id)' > </td>
                    </tr>
                </tbody>
            </table>
			
			<div v-html="rawHtml">
			
			</div>
			<input type="button" v-on:click='getHtml()' onclick="listshow()" value="按钮">
			
			<div v-if="seen">是否显示</div>
			
			<input v-model="message" attr="绑定model">
			<div>绑定model进行显示 </div>
			
			<div v-if="num=='ok'">
			
			</div>
			
			<textarea v-model="message" placeholder="add multiple lines"></textarea>
			<input type="checkbox" id="checkbox" v-model="checked">
			<label for="checkbox"> 复选框</label>
			
			<div id='example-3'>
				<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
				<label for="jack">Jack</label>
				<input type="checkbox" id="john" value="John" v-model="checkedNames">
				<label for="john">John</label>
				<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
				<label for="mike">Mike</label>
				<br>
				<span>Checked names:   复选框</span>
			</div>
			
			<div id="example-4">
				<input type="radio" id="one" value="One" v-model="picked">
				<label for="one">One</label>
				<br>
				<input type="radio" id="two" value="Two" v-model="picked">
				<label for="two">Two</label>
				<br>
				<span>Picked:   单选框</span>
			</div>
			
			<div id="example-5">
				<select v-model="selected">
					<option disabled value="">请选择</option>
					<option>A</option>
					<option>B</option>
					<option>C</option>
				</select>
				<span>Selected:  单选列表</span>
			</div>
			
			<select v-model="selected">
				<option v-for="option in options" v-bind:value="option.value">
					
				</option>
			</select>
			<span>Selected:  动态绑定</span>
			
			<input v-model.trim="msg">
			
			<script type="text/x-template" id="hello-world-template">
				<p>Hello hello hello</p>
			</script>
        </div>
		
    </body>
    <script src="./vue.js"></script>
	<script src="./jquery.js"></script>
	<script src="./vue-resource.min.js"></script>
    <script>
	Vue.component('hello-world', {
		template: '#hello-world-template'
	})
	var vm = new Vue({
		el: '#app',
		data: {
			people:{},//渲染列表
			rawHtml:'',//加载html也moan
			seen:false,//是否显示
			message:'abc',
			num:'ok', //根据判断显示
			checked:true,
			checkedNames:[],
			picked:'',
			selected:'',
			options: [
				{ text: 'One', value: 'A' },
				{ text: 'Two', value: 'B' },
				{ text: 'Three', value: 'C' }
			],
			msg:'age',
		},
		created: function () { //应用初始化完毕加载
			
			this.$http.post('./vue.php').then(function(response){ //发送http请求
		
				this.people=eval(response.data);
			  
			}, function(response){
				// 响应错误回调
				console.log('错误的回调');
			});
		},
		methods: {
			show: function(id) { //点击传值
				
				this.$http.post('./vue.php',{id:"1"},{emulateJSON:'application/x-www-form-urlencoded'}).then(function(response){ //发送http请求
			
					this.people=eval(response.data);
				  
				}, function(response){
					// 响应错误回调
					console.log('错误的回调');
				});
			},
			getHtml: function() { //加载html
				this.$http.get('html.html',{params: {foo: 'bar'}}).then(function(response){
					
					if(response.status ==200) {
						this.rawHtml=response.body;
					}
					
				},function(){
					alert('请求失败处理');   //失败处理
				});
			}
		}
	})
	
	function listshow() { 
		console.log("jquery 绑定");
	}
	
    </script>
</html>


vue循环解析变量到a链接中 
<a :href="'index.php?id='+worklist.homeworkId">

属性赋值案列
<img :src="stu.avatar">

[v-cloak]{
	display: none;
}
v-cloak
数据未加载完毕,隐藏vue标签

//循环判断案列
<li class="homeCircleLi" v-for="(exchild,cindex) in ex.data">
	<a href="javascript:" class="qbtn rightAnswer" v-if="(exchild.is_correct == 1)"></a>
	<a href="javascript:" class="qbtn wrongAnswer" v-else></a>
</li>

个人随笔

安静的等待,你若盛开,蝴蝶自来

承接高质量 网站开发 app开发 如有需要请点击About联系

@承鹏辉