vue模板语法
vue模板语法
vue.js使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定质底层Vue实例的数据，所有Vue.js的模板都是合法的HTML，所有能被遵循规范的浏览器和HTML解析器解析
插值文本
数据绑定最常见的形式就是使用”Mustache“语法{{}} 就是2个大括号的文本插值
特性：
HTML特性不能使用Mustache语法，应该用v-bind指令
案例：设置标题
<!-- 宿主文件 -->
<div id="app">
<h2 v-bind:title="student" >
<!-- ""后面决定鼠标碰到文本显示的文字 -->
<!-- 动态绑定标题，当鼠标碰到h2里的内容会显示标题购物车 -->
<!-- :title="title" -->
<!-- 插值文本 -->
{{title}}
{{student}}
</h2>
</div>
<script src="vue.js"></script>
<script>
// 1.创建实例
const app = new Vue({
el:'#app',
data() {
//数据的指定，vdata
return {
title: '购物车',
student: '炽焱'
//数据
}
},
})
</script>
总结：如截图所示
用v-bind指令来设置标题
2.后面的数据名决定鼠标碰到文本显示的是什么东西
3.这个是动态绑定标题 ，当鼠标碰到h2里的内容会显示标题购物车
4.2种方法：
v-bind:title="student"
:title="studen"
结果：
列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。 v-for指令需要使用item in items 形式的特殊语法，其中items 是原数组的数组 ， 而item 则是原数组的别名
案例： 课程列表
<!-- 宿主文件 -->
<div id="app">
<h2 v-bind:title="student" >
<!-- ""后面决定鼠标碰到文本显示的文字 -->
<!-- 动态绑定标题，当鼠标碰到h2里的内容会显示标题购物车 -->
<!-- :title="titleS" -->
<!-- 插值文本 -->
{{title}}
{{student}}
</h2>
<!-- 列表渲染 -->
<div v-for="c in courses" :key="c">
<!-- 用vfor来把需要的课程遍历出来 -->
<!-- c别名相当于下面的课程 后面引用前面取得名字 -->
<div>{{ c}}</div>
</div>
</div>
<script src="vue.js"></script>
<script>
// 1.创建实例
const app = new Vue({
el:'#app',
data() {
//数据的指定，vdata
return {
title: '购物车',
student: '炽焱',
courses:['羽毛球课','前端开发','java开发']
}
}
})
总结：1.用vfor来把需要的课程遍历出来
2.item 是别名可以任意取
3.items 是下面数组名
结果：可以看出来是把课程都遍历出来了，跟原生的for循环差不多
表单的绑定/事件处理
1.表单的绑定 ：用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据的绑定，他会根据控件类型自动选取正确的方法跟新元素，v-model会进行特殊处理
<input v-model="course" type="text" v-on:keydown.enter="addCourse"/>
2，事件处理：用v-on来监听dom事件从而触发js的代码
<input v-model="course" type="text" v-on:keydown.enter="addCourse"/>
<button @click="addCourse">新增</button>
<!-- 1.v-on:click触发监听事件 2.@click -->
<!-- vmodel 双向的绑定，只能绑定input text,进行数据的交互 -->
<!-- {{course}} -->
在原先的基础上加上表单的绑定，新增课程
<!-- 宿主文件 -->
<div id="app">
<h2 v-bind:title="student" >
<!-- ""后面决定鼠标碰到文本显示的文字 -->
<!-- 动态绑定标题，当鼠标碰到h2里的内容会显示标题购物车 -->
<!-- :title="titleS" -->
<!-- 插值文本 -->
{{title}}
{{student}}
</h2>
<!-- 用户输入 -->
<p>
<input v-model="course" type="text" v- on:keydown.enter="addCourse"/>
<button @click="addCourse">新增</button>
<!-- 1.v-on:click触发监听事件 2.@click -->
<!-- vmodel 双向的绑定，只能绑定input text,进行数据的交互 -->
<!-- {{course}} -->
</p>
<!-- 列表渲染 -->
<div v-for="c in courses" :key="c">
<!-- 用vfor来把需要的课程遍历出来 -->
<!-- c别名相当于下面的课程 后面引用前面取得名字 -->
<div>{{ c}}</div>
</div>
</div>
<script src="vue.js"></script>
<script>
// 1.创建实例
const app = new Vue({
el:'#app',
data() {
//数据的指定，vdata
return {
title: '购物车',
student: '炽焱',
course:'',
//数据
courses:['羽毛球课','前端开发','java开发']
}
},
methods: {
//点击事件用methods方法
// 注意要用vmethods才行
addCourse() {
//1。添加course到数组
this.courses.push(this.course)
//2.清空course
this.course = ""
}
},
})
总结：
//跟用户交互的时候使用双向绑定vmodel
//监听事件：v-on:keydown 或者v-on:keyup 来使用，保证数据的唯一后面加.enter回车后v-on:keydown.enter
//查看修饰符
结果；2张图可以看出来结果
class与style绑定
案例：点击选择样式
class方法：
<style>
.active{
background-color: #ddd;
}
</style>
<!-- 列表渲染 -->
<!-- class方式 -->
<!-- <div v-for="c in courses" :key="c" :class="{active: selectCourse === c}"
@click= "selectCourse = c">
如果选到的文本和当前遍历的文本相同就给上颜色 active -->
<!-- 用vfor来把需要的课程遍历出来 -->
<!-- c别名相当于下面的课程 后面引用前面取得名字 -->
<!-- {{c}}
</div> -->
style方法：
<!-- style方式来写 -->
<div v-for="c in courses" :key="c"
:style="{backgroundColor: selectCourse === c ? '#ddd' : 'transparent'}"
@click= "selectCourse = c">
<!-- 背景用驼峰 三目运算 如果selectCourse等于当前课程 就给颜色 否则不给 -->
{{c}}
</div>
全部代码：