vue--vue一些基础语法-前端开发

3.vue一些基础语法3.1.v-bindbodydiv id=apph1 v-bind:title=message鼠标悬停几秒钟查看此处动态绑定的提示信息！/h1!-- v-bind 指令的简写形式：冒号（:） --h1 :title=message我是标题/h1...

3.vue一些基础语法

3.1.v-bind

<body>
<div id="app">

<h1 v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</h1>
    
    
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">我是标题</h1>
    
</div>
    
    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>

3.2.v-if 系列

<body>
<div id="app">

<h1 v-if="type === 'A'">A</h1>
<h1 v-else-if="type === 'B'">B</h1>
<h1 v-else-if="type === 'C'">C</h1>
<h1 v-else>who</h1>
<h1 v-if="ok">1</h1>
<h1 v-else>0</h1>

</div>
    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
ok:true, 
type: 'A'
}
})
</script>
</body>

3.3.v-for

<body>

<div id="app">
    
<li v-for="item in items">
{{ item.message }}
</li>
    
</div>
    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
//items数组
items: [
{message: '狂神说Java'},
{message: '狂神说前端'}
]
}
});
</script>
</body>]()

<body>

<div id="app">
    
<li v-for="(item,index) in items">
{{ item.message }}  {{index}}
</li>
    
</div>
    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
//items数组
items: [
{message: '狂神说Java'},
{message: '狂神说前端'}
]
}
});
</script>
</body>

3.4.v-on

<body>
<div id="app">

<button v-on:click="sayHi">点我</button>
<!-- v-on 指令的简写形式 @ -->
<button @click="sayHi">点我</button>

</div>

    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World'
},
// 方法必须定义在 Vue 实例的 methods 对象中
methods: {
sayHi: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert(this.message);
}
}
});
</script>
</body>

3.5.v-model(双向绑定)

文本框

<body>
<div id="app">
    
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{{searchMap.keyWord}}</p>
    
</div>
    
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: 'kuangshen'
}
}
})
</script>
</body>

单复选框

<body>
<div id="app">
单复选框：
<input type="checkbox" id="checkbox" v-model="checked">
&nbsp;&nbsp;
<label for="checkbox">{{ checked }}</label>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>

<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>
</body>

多复选框

<body>
<div id="app">
多复选框：
<input type="checkbox" id="jack" value="Jack" vmodel="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" vmodel="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" vmodel="checkedNames">
<label for="mike">Mike</label>
<span>选中的值: {{ checkedNames }}</span>
</div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
</body>

单选按钮

<body>
<div id="app">
单选按钮：
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<span>选中的值: {{ picked }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
</body>

下拉框

<body>
<div id="app">
下拉框：
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选中的值: {{ selected }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js">
</script>
<script>
var vm = new Vue({
el: '#app',
data: {
selected: ''
}
});
</script>
</body>

3.vue一些基础语法

3.1.v-bind

3.2.v-if 系列

3.3.v-for

3.4.v-on

3.5.v-model(双向绑定)

基础教程推荐