ディレクトリ
まず、マウントポイント(エル)
<!--导入vue-->
<script src="js/vue.js"></script>
<script>
new Vue({
el:'ccs选择器'
})
</script>
Vueの本は、この設定はCSSの良い対応するセレクタに関連付けられます
注意点:
- 唯一の最初の試合の結果によってポイントをマウント
- htmlタグ本体とマウントポイントとして使用することはできません
- 唯一の一般IDセレクタ(一意)の使用上のマウントポイント
第二に、補間式
html差值部分页面
<h1>{{msg}}</h1>
Vue部分代码
<script>
new Vue({
el:'h1'
data:{
msg:'插入的信息'
}
})
</script>
注意点
:VueのMSG段変速変更に関する他の条件の大きくない番号の下にMSGを変更します
内部フィルタ機能値
<h2>{{msg|函数名}}</h2> h2标签内值为msg进过函数处理后的返回值
第三に、バインドされた変数のレンダリングレンダリング一度
还是基于上述的html页面
<!--原html页面-->
<h1>{{msg}}</h1>
<!--进行约束设置,设置后一次性渲染,后面msg发送变化后里面内容不会发送改变-->
<h1 v-once="msg">{{msg}}</h1>
<h1 v-once="msg" v-text='msg'></h1>
<h1 v-once="msg" v-html='msg'></h1>
<h1 v-once="msg">{{msg+msg2}}</h1>
<!--一次性渲染,插值表达式中的任何一个变量被限制,整个结果就不可变-->
改变值我们可以通过input框,输入值改变msg变量的值
<input type="text" v-model="msg">
注意我们不能使用
<input type="text" :value="msg">
这个只能显示msg,input输入的值不会使得msg的值发送变化
第四に、テキストの指示
1.vテキスト
<h2 v-text="msg"></h2>
HTML試験H2内のタグは、パスVUEのMSG変数の値であるが、ラベルが解析されていない場合
以下のような文字列を4つの操作を渡すことができる値関連の操作
2.v-HTML
<h2 v-html="html"></h2>
<--假设html变量为<a>ss<a>-->
H2タグはSSを表示します
HTMLタグを解析することができます
第五に、プロパティコマンド
重点
属性指令:v-bind:属性名="属性值" => v-bind: 可以简写为 :
書くの異なるスタイル
言葉遣い:
<!--1)变量:变量的值为字典-->
<div :style="my_style" class='test'></div>
<script>
new Vue({
el:'.test'
data:{
my_style: {
width: '100px',
height: '100px',
'background-color': 'cyan',
borderRadius: '50%'
},
}
})
</script>
2著:
<!--2)字典中的多个变量-->
<div :style="{width: w, height: h, background: b}"></div>
<script>
new Vue({
el:'.test'
data:{
w: '50px',
h: '50px',
b: 'red',
}
})
</script>
クラスについて書きます
<!--class属性-->
<!--<div class="box blue"></div>-->
<div :class="c"></div>
<div :class="[c1, c2]"></div>
<div :class="[c1, 'blue']"></div>
<!--x为类名,是否生效有变量y(true|false)值决定-->
<div :class="{x: y}"></div>
<div :class="[{'box': true}, c2]"></div>
<script>
new Vue({
el: '#app',
data: {
c: 'box blue',
c1: 'box',
c2: 'green',
y: true,
}
})
</script>
第六に、イベントコマンド
事件指令 v-on:事件名="函数" => v-on: 可以简写为 @
七、関数を作成するには
この方法の一つ
<script>
new Vue({
el:'h1'
data:{
msg:'插入的信息'
}
methods: {
函数名 () {
函数体
},
})
</script>
方法二
<script>
new Vue({
el:'h1'
data:{
msg:'插入的信息'
}
methods: {
函数名:function () {
函数体
},
})
</script>
メソッドスリー
<script>
new Vue({
el:'h1'
data:{
msg:'插入的信息'
}
methods: {
函数名:() => {
函数体
},
})
</script>
注意点
:このようなアプローチは、内部が(これはここではウィンドウ参照)これを取得します
八、イベント参加との質量差のパラメータ渡しを指揮していません
<!--没有传值默认传 函数会接收到事件对象 -->
<div @click="btnClick1">{{ msg }}</div>
<!--方法()不会直接调用方法,而是在点击触发后进行传参,接收到的参数就是传入的参数-->
<div @click="btnClick2(1, msg)">{{ msg }}</div>
<!--一旦书写 方法() 就不再传入事件对象,通过 $event 手动传入事件对象-->
<div @click="btnClick3(msg, $event, $event)">{{ msg }}</div>
IXフォームのコマンド
<form action="">
<!--表单指令:v-model="变量"-->
<!--双向绑定:一个地方修改值,所有地方的数据都会被更新-->
<div>
<input type="text" v-model="info" name="usr">
<input type="password" v-model="info" name="pwd">
<p>{{ info | infoFilter }}</p>
</div>
<div>
<!--单选框:v-model="变量存放的是某个单选框的value值,代表该选框选中"-->
男<input type="radio" name="sex" value="male" v-model="sex_val">
女<input type="radio" name="sex" value="female" v-model="sex_val">
</div>
<div>
<!--单独的复选框:v-model="true|false代表该选框是否选中"-->
是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree">
</div>
<div>
<!--群复选框:v-model="存放选中选框value的数组"-->
<!--cbs_valrug如果传空数组会一个都不选,如果数组对应里面的value会勾选-->
<!--cbs_valrug如果传true|false,里面的能容就表示要么全选要么都不选->
男<input v-model="cbs_val" value="male" type="checkbox" name="hobby">
女<input v-model="cbs_val" value="female" type="checkbox" name="hobby">
不能说<input v-model="cbs_val" value="others" type="checkbox" name="hobby">
<p>{{ cbs_val }}</p>
</div>
<div>
<input type="submit">
</div>
</form>
<script>
new Vue({
el: '#app',
data: {
info: '',
sex_val: 'female',
cb_val: 0,
cbs_val: ["others"]
}
})
</script>
テン、条件付き命令
- V-場合:非表示をレンダリングしていない、隠されたときにキャッシュメモリを設定するには、キー属性によって、キャッシュキーを設定することができます
- V-ショー:表示と非表示:何もレンダリングしません
使用します。
<div class="box red" v-if="ture|flase" key="box_red"></div>
<div class="box blue" v-show="ture|flase"></div>
接收的值只能是ture|flase,如果是0则是flase,如果是1则是ture
key属性可以对于在内存中名字进行设置,且f12你看不到key这个属性
关于内存的存储
- localStorage.key名:キーの値:パーマネントが、手動でキャッシュを削除することができます
- sessionStorage.key名:キーの値:ページオフ一時バッファまたはブラウザを閉じて再度開くが消えます
メモリ上のコール
- localStorage.key名
- sessionStorage.key名称
- V-IF | V-のelif | V-ELSE:
- 注意点
- あまりにものelif、同じ道を下るない場合には有効であれば
- 他のフロントは、彼が設定されている場合でも有効になりません
flase
、彼はまだ有効になります - すべての他の一般的に彼に任意の値をしない真であります
- 注意点