Vue_day01
1. 理解 VUE
1.1 で何VUE
（1）Vueが緩やかビルドインターフェースフレームJSあります
（2）のみビュー層、ボトムアップ設計インクリメンタル開発に関する。
（3）Vueの目標は、結合および成分の組み合わせを表示するAPIデータに応じてできるだけ単純にすることによって達成されます。 - 結合双方向のデータ
言う：VUEは、インタフェースフレームワークのJSを行うことです（jqueryの/ easyui）
1.2vue どのように使用します
プロジェクトはVUEのインストールNPM実行されている（1）
（2）vue.jsページの紹介
ます。<script type = "text / javascriptの" SRC = "node_modules / VUE / DIST / vue.js"> </ SCRIPT>
（3）試験コード
<身体>
<DIV ID = "アプリ">
{{名前}}
</ div>
<スクリプト>
新しいビュー（{
エル： "＃アプリ"、
データ：{
名前： "XXXX"
}
}）;
</ SCRIPT>
1.3エルマウント
エル：に対応するオブジェクトの上に、マウントVUEラベルをマウント
エル方法：
（1）識別方法マウント
<身体>
<DIV ID = "アプリ">
{{名前}}
</ div>
<スクリプト>
新しいビュー（{
エル： "＃アプリ"、
データ：{
名前： "XXXX"
}
}）;
</ SCRIPT>
（2）クラスローディング方法
<身体>
<のdivクラス= "アプリ">
{{名前}}
</ div>
<スクリプト>
新しいビュー（{
エル： "アプリ。"、
データ：{
名前： "XXXX"
}
}）;
</ SCRIPT>
1.4データデータ
データ：文字列オブジェクトを置くと配列はOKです
データ：{ "ショー"：真、 "隠された"：偽、 "スコア"：66 }
1.5メソッドのメソッド
メソッドのメソッド：
方法：{ changeData （）{ コンソールの.log （ this.msg ）。} }
1.6 VUE ライフサイクル
1.7 結合双方向データ
<body>
<div id="app">
<input type="text" v-model="msg" v-on:change="changeData"/>
<div>
{{msg}}
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
name: "信息",
msg: "test"
},
methods:{
changeData(){
console.log(this.msg);
}
}
});
</script>
2.vue指令
2.1 v-for
循环
<body>
<div id="app">
循环数组
<ul>
<li v-for="hobby in hobbys">
{{hobby}}
</li>
</ul>
<hr>
循环对象
<ul>
<li v-for="u in user">
{{u}}
</li>
</ul>
<hr/>
带索引循环数组
<ul>
<li v-for="(hobby,index) in hobbys">
{{hobby}}==={{index}}
</li>
</ul>
<hr/>
循环对象
<ul>
<li v-for="(value, key, index) in user">
{{key}} == {{value}} ---> {{index}}
</li>
</ul>
<hr/>
循环json数据
<table>
<thead>
<tr>id</tr>
<tr>name</tr>
<tr>age</tr>
<tr>sex</tr>
</thead>
<tbody>
<tr v-for="student in students">
<td>{{student.id}}</td>
<td>{{student.name}}</td>
<td>{{student.age}}</td>
<td>{{student.sex}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script>
var app = new Vue({
el:"#app",
data: {
user: {
name: "德莱文",
age: 18,
sex: "男"
},
hobbys: ["打篮球", "踢足球", "打羽毛球"],
students: [
{id: 1, name: "刘备", age: 29, sex: "男"},
{id: 2, name: "貂蝉", age: 30, sex: "女"},
{id: 3, name: "吕布", age: 31, sex: "男"}
]
}
});
</script>
2.2 v-bind
绑定的标签里面属性的值
<body>
<div id="app">
<img width="100" src="img/11.jpg"/>
<img width="100" v-bind:src="imgSrc">
<img width="100" :src="imgSrc"/>
<input type="text" name="username"/>
<input v-bind="props"/>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
imgSrc:"img/11.jpg",
props:{
type:"text",
name: "username"
}
}
});
</script>
2.3 v-show
控制display这个属性
<body>
<div id="app">
<div v-show="show">show show show ...</div>
<div v-show="hidden">hidden hidden hidden...</div>
<div v-show="score > 80">if if if</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
"show":true,
"hidden":false,
"score":66
}
});
</script>
2.4 v-if/else
如果不成立 ,在页面无法看到
<body>
<div id="app">
<div v-if="age , 18">你还年轻，还可以玩一下</div>
<div v-else-if="age > 20 && age < 60">小伙子，我这里有一本java的秘籍要不要看一看？</div>
<div v-else>
可以退休啦~~
</div>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
"show": true,
"hidden": false,
"score": 66
}
});
</script>
2.5 v-model
控制标签里面value 完成双向绑定
<body>
<div id="app">
绑定普通的字符串值
<input v-model="inputValue" />
{{inputValue}}
<h1>绑定到type=checkbox的input表单元素</h1>
打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
data中的值:{{checkboxValue}}
<h1>绑定到type=radio的input表单元素</h1>
打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
data中的值:{{radioValue}}
<h1>绑定到文本域的值</h1>
<textarea v-model="textAreaValue"></textarea>
data中的值:{{textAreaValue}}
下拉的值
<select v-model="skills">
<option value="rap">rap</option>
<option value="唱">唱</option>
<option value="跳">跳</option>
</select>
{{skills}}>
</div>
</body>
<script>
var app = new Vue({
el: "#app",
data: {
inputValue:"输入的text值",
checkboxValue:["踢足球"],
radioValue:"打篮球",
textAreaValue: "溜了溜了...",
sills:"唱"
}
});
</script>