html（index.html）
<html>
<head>
<title>vue title</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="vue-app">
<!-- 不同类型数据 -->
<h1>name: {{ name }}</h1>
<input type="text" v-bind:value="name">
<a v-bind:href="website">website</a>
<!-- v-bind简写 -->
<a :href="website">website</a>
<p v-html="websiteTag"></p>
<!-- class与style样式绑定 -->
<span :class="{classNameA:boolean}">class/style</span>
<!-- 简单boolean点击事件 -->
<span @click="boolean = !boolean" v-bind:class="{classNameA:boolean}">class/style</span>
<!-- 多个class -->
<div :class="allClass">class/style</div>
<!-- 循环 -->
<div v-for="item in arrayA">{{item}}</div>
<template v-for="(item,index) in arrayA">
<p>{{index}} - {{item}}</p>
</template>
<div v-for="item in arrayB">{{item.name}} - {{item.age}}</div>
<!-- 事件绑定区别 -->
<p>{{ helloWorld() }}</p>
<p v-on:click="helloWorld">helloWorld</p>
<p @click="helloWorld">helloWorld</p>
<!-- 事件修饰符 -->
<p @click.once="helloWorld">helloWorld</p>
<!-- 双向数据绑定 input/textarea/select-->
<!-- 方法1 -->
<input ref="name" type="text" @keyup="getName"></input>
<!-- 方法2 -->
<input type="text" v-modal="name"></input>
<!-- 计算属性 -->
<p>A + C = {{addA}}</p>
<p>B + C = {{addB}}</p>
</div>
<script src="app.js"></script>
</body>
</html>
JavaScript（app.js）
// 实例化vue对象
new Vue({
// el:element 需要获取的元素，一定是html的根容器元素
el:"#vue-app",
// 数据的存储
data:{
name:"进击的金城武";
website:"https://www.one.ju798.com",
websiteTag:"<a href='https://www.one.ju798.com'>websiteTag</a>",
numberA:0,
numberB:0,
numberC:10,
changeColor:false,
changeLength:false,
//array
arrayA:[1,2,3,4],
arrayB:[{name:"coca",age:18},{name:"cola",age:17}]
},
// 存储各种方法
methods:{
// 事件
helloWorld(){
alert('helloWorld!');
},
// 双向数据绑定 方法1
getName(){
this.name = this.$refs.name.value;
},
},
// 计算属性
computed:{
addA(){
return this.numberA+this.numberC;
},
addB(){
return this.numberB+this.numberC;
},
allClass(){
return {
classNameA: changeColor,
classNameB: changeLength
}
}
}
});
事件修饰符详解
https://blog.csdn.net/qq_39009348/article/details/81508264
计算属性
computed与methods的区别
computed是基于依赖进行缓存，value发生改变函数才会执行；而methods每次调用都会执行。
v-if与v-show
v-if判断是从dom树中摘除此元素；v-show则是display:none。
v-for
template可避免循环渲染多容器嵌套时多余父级元素。
158
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
