1つ、テンプレート構文
1.テンプレートの理解：
ダイナミックHTMLページには、いくつかのJS構文コード、中括弧式、命令（v-で始まるカスタムタグ属性）が含まれています。
2.二重中括弧式
構文：{
{exp}}または{
{
{exp}}}
関数：ページにデータを出力するには、オブジェクトのメソッドを呼び出すことができます
<div id="app">
<p>双大括号表达式</p>
<p>{
{
msg}}</p>
<p>{
{
msg.toUpperCase()}}</p><!--大写-->
</div>
<script type="text/javascript">
const vm=new Vue({
el:"#app",
data:{
msg:'hello world!',
}
});
</script>
v-text v-html
<p>{
{
msg}}</p> <!--textContent-->
<p v-text="msg"></p> <!--textContent-->
<p v-html="msg"></p> <!--innerHTML-->
3.コマンド1：必須のデータバインディング
機能：変更された属性値を指定します
完全な書き込み：v-bind：xxx = 'yyy' // yyyは式分析として実行されます。
簡潔な書き込み:: xxx = 'yyy'
<a href="url">访问指定网站</a><br> <!--并不会显示，报错-->
<a v-bind:href="url">bind强制跳转</a><br><!--跳转百度-->
<a :href="url">简洁写法</a><br><!--简洁写法-->
<script type="text/javascript">
const vm=new Vue({
el:"#app",
data:{
url:'https://www.baidu.com/'
}
});
</script>
4.手順2：バインディングイベントの監視
関数：指定されたイベント名のコールバック関数をバインドします
完全な書き込み：v-on：click = 'xxx'
簡潔な書き込み：@ click = 'xxx'
<button v-on:Click="test">点我</button>
<button @click="test('你好')">再点我</button>
const vm=new Vue({
el:"#app",
data:{
url:'https://www.baidu.com/'
},
methods: {
test(a){
alert(a)
}
},
});
2.属性の計算と監視
1.計算されたプロパティ
計算された属性オブジェクトで属性を計算する方法を定義し、それ
をページで使用{
{方法名}}して計算結果を表示します
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
</div>
<script>
const vm=new Vue({
el:"#demo",
data:{
firstName:"",
lastName:"",
},
computed:{
//初始化时会执行一次，相关的data值发生变化时也会执行
fullName1(){
//计算属性的一个,方法的返回值作为属性值
console.log("fullName1()");
return this.firstName+" "+this.lastName;
}
}
});
</script>
2.プロパティの監視
指定された属性を監視して$watch()かwatchの設定VMオブジェクト。
変更を属性すると、コールバック関数が自動的に呼び出され、計算は関数内で実行されます
watch:{
firstName:function(value){
//当firstName发生变化的值就是value
this.fullName2=value+" "+this.lastName;//this就是vm
},
lastName:function(value){
this.fullName2=this.firstName+" "+value;
}
}
または$watch()、lastNameの変更を監視するために使用します
vm.$watch('lastName',function(value){
this.fullName2=this.firstName+' '+value
})
3.高度な計算プロパティ
getter/setter表示を実現し、属性データの監視、
計算された属性がキャッシュされ、そして複数の読み取り後にゲッタ計算は一度だけ実行される。
セットモニタ現在の属性値の変化。
fullName3:{
//回调函数(定义了，未调用，最终还是执行了)
get(){
//需要读取当前的属性值时回调执行，计算并返回当前属性的值
return this.firstName+' '+this.lastName
},
set(value){
//回调函数：当属性值发生改变时回调，更新相关的属性数据
//value就是fullname3的最新属性值
const name=value.split(' ')
this.firstName=name[0]
this.lastName=name[1]
}
},
3、クラスとスタイル
1.理解する
アプリケーションインターフェイスでは、特定の要素のスタイルが変更されます。
クラス/スタイルバインディングは、動的なスタイル効果を実現するために特に使用されるテクノロジです。
2.クラスバインディング:: class = 'xxx'
<style>
.aClass{
color: red;
}
.bClass{
color: seagreen;
}
.cClass{
font-size: 30px;
}
</style>
<div id="app">
<h2>1. class绑定: :class='xxx'</h2>
<p :class="myClass">xxx是字符串</p>
<p :class="{aClass:isA,bClass:isB}">xxx是对象</p>
<p :class="['bClass','cClass']">xxx是数组</p>
<button v-on:Click="test">点我</button>
<button @click="test2">再点我</button>
</div>
xxxは文字列です：クラス名を直接渡します
xxxはオブジェクトです：クラス名：ブール値
xxxは配列です：複数のクラス名が配列に配置され、さまざまな効果を示します
const vm=new Vue({
el:"#app",
data:{
myClass:'aClass',//红色
isA:true,
isB:false,
},
methods: {
test(){
//点击变绿色
this.myClass='bClass'
},
test2(){
//点击红变绿、绿变红
this.isA=!this.isA;
this.isB=!this.isB;
}
},
});
3.スタイルバインディング
style = "{color：activeColor、fontSize：fontSize + 'px'}"
ここで、activeColor / fontSizeはデータ属性です。
<h2>2. style绑定</h2>
<p :style="{color: activeColor, fontSize: fontSize + 'px' }">style变样式</p>
data:{
activeColor:'red',
fontSize:20,
},
methods: {
test(){
this.activeColor='green'
this.fontSize=30
},
3つの条件付きレンダリング
1.条件付きレンダリング手順
v-if
v-else
v-show
2.v-ifとv-showを比較します
v-showを頻繁に切り替える必要がある場合は、
<body>
<div id="app">
<p v-if="ok">成功</p>
<p v-else>失败</p>
<p v-show="ok">表白成功</p>
<p v-show="!ok">表白失败</p>
<button @Click="ok=!ok">点我</button>
</div>
<script>
const vm=new Vue({
el:"#app",
data:{
ok:true
}
})
</script>
</body>
第四に、リストのレンダリング
1.リスト表示
配列：v-for / index
オブジェクト：v-for / key
2.オブジェクトをトラバースするとき
（1）3つの値の場合：
v-for="(value, name, index) in object ：key="key"
キーの後、シリアル番号を意味し、最初の位置は属性値を意味し、2番目の位置は属性名を意味します
（2）2つの値の場合：
v-for="(value, key) in object ：key="key"
最初の位置は属性値を表し、2番目の位置は属性名を表します
<h2>测试v-for遍历对象</h2>
<ul>
<li v-for="(name,value,index) in person[1]" :key="index">
{
{
index}}--{
{
value}}---{
{
name}}
</li>
</ul>
<li v-for="(value,key) in person[1]" :key="key">
{
{
key}}-----{
{
value}}
</li>
3.配列をトラバースするとき
v-for="(p, index) in person" :key="index"
キーの後、それはシリアル番号を意味し、pは配列を意味します
<body>
<div id="app">
<h2>测试v-for遍历数组</h2>
<ul>
<li v-for="(p, index) in person" :key="index">
{
{
index}}---{
{
p.name}}---{
{
p.age}}
---<button @click="deleteP(index)">删除</button>
---<button @click="updateP(index,{name:'cat',age:6})">更新</button>
</li>
</ul>
</div>
<script>
//vue本身只是监视了person的改变，没有监视数组内部数据的改变
//vue重写了数组中的一系列改变数组内部数据的方法（先调用原生，更新界面）
const vm= new Vue({
el:"#app",
data:{
person:[
{
name:"aaa",age:18},
{
name:"bbb",age:19},
{
name:"ccc",age:20},
{
name:"ddd",age:21}
]
},
methods: {
deleteP(index){
//删除person中指定index的p
this.person.splice(index,1);// 调用了不是原生数组的splice(), 而是一个变异(重写)方法
// 1. 调用原生的数组的对应方法
// 2. 更新界面
},
updateP(index,newP){
//并没有改变person本身，数组内部发生了变化，但是没有调用变异方法，vue不会发生改变更新
//this.person[index]=newP;
this.person.splice(index,1,newP);
}
},
})
</script>
</body>