vue基础杂集
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title></title>
<style type="text/css">
.active {
margin-top: 15px;
width: 100px;
height: 100px;
background: green;
}
.text-danger {
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<h4 v-html="message"></h4>
<p v-if="Math.random() > 0.5"> >0.5</p>
<p v-else><=0.5</p>
<p v-if="type === 'A'">A</p>
<p v-else-if="type === 'B'">B</p>
<p v-else-if="type === 'C'">C</p>
<p v-else>Not A/B/C</p>
<h1 v-show="show">Hello!</h1>
<ol>
<li v-for="x in sites">
{{ x.name }}<span v-if="x.city!=null">+</span>{{x.city}}
</li>
</ol>
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
<ol>
<li v-for="(value, key) in object"> <!--循环的顺序和输出的顺序是相反的-->
{{ key }} : {{ value }}
</li>
</ol>
<ul>
<li v-for="(value, key,index) in object">
{{index}}:{{ key }} : {{ value }}
</li>
</ul>
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
<p>字符串反转 {{ message.split('').reverse().join('') }}</p>
<p>直接调用方法获得结果 {{reversedMessage2()}}</p>
内连样式：
<div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div>
class 属性绑定：
<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="{ active: isActive, 'text-danger': hasError }">fsfug</div>
<button v-on:click="counter += 1">增加 1</button>
<p>这个按钮被点击了 {{ counter }} 次。</p>
<button v-on:keyup.13="alt">只要enter键有用</button>
<button v-on:click="showData">测试jquery加载数据</button>
<table border="1">
<tr v-for="data in datas">
<td>{{data.Name}}</td>
<td>{{data.Url}}</td>
<td>{{data.Country}}</td>
</tr>
</table>
</div>
</body>
</html>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
datas:'',
message:"hello Vue",
type:"A",
show:true,
isActive: true,
hasError:true,
counter:0,
sites: [
{ name: 'Runoob',city:"usa" },
{ name: 'Google' },
{ name: 'Taobao' }
],
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
},
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
}
},
methods: {
reversedMessage2: function () {
return this.message.split('').reverse().join('')
},
alt:function(){
alert("ENTER");
},
showData:function () {
jQuery.ajax({
type: 'Get',
url: "angu.json",
success: function (data) {
vm.datas = data.sites;
}
})
}
}
})
</script>
