<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"><br/>
{{msg}}
<div v-text="msg"></div>
<div v-once>
{{msg}}----{{msg}}
</div>
<div v-html="p"></div>
{{arr}}
<div>
<ul>
<li v-for="item in fruits">
{{item.name}}
</li>
</ul>
</div>
<div>
<ul>
<li v-for="(item,index) in fruits">
{{item.name}}{{index+1}}
</li>
</ul>
</div>
<div>
<ul>
<li v-for="(item,index) in fruits">
{{index+1}}.{{item.name}}
<ul>
<li v-for="(c,childIndex) in item.color">
{{index+1}}.{{childIndex+1}}.{{c}}
</li>
</ul>
</li>
</ul>
</div>
<div v-for="(value,key,index) in obj">{{key}}:{{value}}:{{index}}</div>
</div>
<!-- <script src="node_modules\vue\dist\vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '123',
p:'<h1>aaa</h1>',
arr:[1,2,3,4,5],
fruits:[
{name: '香蕉' , color: ['green','yellow']},
{name: '苹果' , color: ['red','green', 'yellow']},
{name: '西瓜' , color: ['pink']}
],
obj:{name:'huang',age:24,address:'xxx'}
}
});
// vm.arr.reverse();
vm.arr=vm.arr.map(item=>item*3);
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>hello</title>
</head>
<body>
<div id="app">
<div v-on:mousedown="fn">点我啊</div>
<div @mousedown="fn">v-on 等价于 @</div>
<div @mousedown="fn($event)">调用不要加(),如果加了，必须写成($event)</div>
</div>
<!-- <script src="node_modules\vue\dist\vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
let vm=new Vue({
el:'#app',
data:{
a:111111,
},
methods:{
fn(){alert(this.a)}
}
})
</script>
</body>
</html>