本文介绍了Vue.js的基本语法。Vue是javascript渐进式、MVVM框架模式。使用script标签引入后，可通过new实例化根实例。还阐述了模板语法、指令、class与style绑定、条件渲染、列表渲染、数组更新检测、事件处理等内容，并给出不同场景下的使用建议。
Vue.js的基本语法
Vue概述：
Vue.js也是一个javascript的渐进式框架（ 越学越难 ）
Vue是 MVVM 框架模式。
M - Model 数据层
V - View 视图层
VM - ViewModel 视图模型（ 业务逻辑 VM 是 由 P 改名得来的）。
Vue 基础
使用script标签引入Vue,就会暴露一个Vue的全局变量
Vue 是一个构造器函数
我们是 new 来实例化 Vue
new Vue的到的实例，我们这边称之为 根实例
根实例也是一个组件
组件： 组件是一个具有 html css js等的一个聚合体
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<!-- 这里使用的是CDN, 引入Vue -->
<body>
<div id="app">
<p> {{ msg }} </p>
<!--里面 msg 就是data中的msg
我们要在模板中书写js语法，那么我们使用了一个叫做 mustache 的语法糖（ 双大括号 ）
-->
</div>
</body>
<script>
new Vue({
el: '#app', //挂载，el表示我们的实例的模板 （body中id为app的模块）
//将选择的DOM元素引入JS中，相当于将DOM元素放到JS中，称为：jsx=js+XML
data: { //是用来给实例定义数据的
msg: 'hello Vue.js'
}
})
</script>
- 模板语法
- 插值
a.文本 {{}}
b.纯HTML
v-html ，防止XSS,Cc.表达式 - 指令：是带有 v- 前缀的特殊v-bind
v-if v-show
v-on:click
v-for - 缩写
v-bind:src => :src
v-on:click => @click
- 插值
- class 与 style
- 绑定HTML Class
- 对象语法
<p :class = "{ size,bg_color }">1</p> <p :class = "{ size: true, bg_color: true }">2</p> <p :class = "{ [size]: true, [bg_color]: true }">3</p> <p :class = "{ [size]: 5>3?true: false, [bg_color]: true }">4</p> - 数组语法
<p :class = "[ bg_color, flag? s:'box']" class = "yyb"></p> <!-- 个人比较建议这种写法,简单明了， ‘flag? s:'box’ 这是一个简单的三目 --> <p :class = "[ flag? s:'box', bg_color]">7</p> <p :class = "[ flag? s:'box', bg_color]" class = "yyb"></p>
- 对象语法
- 绑定内联样式
- 对象语法
<p :style = "{ width: size.width,height: size.height,background: 'red'}"></p> - 数组语法
<p :style = "{ width: size.width,height: size.height,background: 'red'}"></p> <p :style = "[ { width: '100px',background: 'blue'},{ height: '100px' } ]"></p> <p :style = "[ size,bg ]"></p> <!-- 直接在 data中将属性写成对象 -->
- 对象语法
- 绑定HTML Class
- 条件渲染
- v-show
<p v-show = "showFlag"> v-show指令 </p> <!-- v-show 是设置元素的 display 属性的，控制DOM元素是否显示， 当showFlag 为true是元素显示，为false时元素不显示，但元素还时存在的。 --> - v-if
<p v-if = "ifFlag"> v-if - 指令</p> <!-- v-if 类似 v-show 控制元素是否显示 。不同的是：v-if 是控制元素的创建和摧毁的， v-if 为true是创建，为false时摧毁元素，此时此元素时不存在的！ --> - v-else v-else-if
<p v-if = " type === 'A'"> A </p> <p v-else-if = " type === 'B'"> B </p> <p v-else> C </p> - template
- 总结：
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；
如果在运行时条件很少改变，则使用 v-if 较好。
- v-show
- 列表渲染
- v-for (特殊 v-for=“n in 10”)
a. inb. of - key：
*跟踪每个节点的身份，从而重用和重新排序现有元素
*理想的 key 值是每项都有的且唯一的 id。 - 数组更新检测
- 使用以下方法操作数组，可以检测变动
push() pop() shift() unshift() splice() sort() reverse() - filter(), concat() 和 slice() ,map(),新数组替换旧数组
- 不能检测以下变动的数组
vm.items[indexOfItem] = newValue
解决 (1)Vue.set(example1.items, indexOfItem, newValue)
(2)splice
- 使用以下方法操作数组，可以检测变动
- 应用:显示过滤结果
- v-for (特殊 v-for=“n in 10”)
- 事件处理
-
监听事件-watch
- watch 用来监听 data 中的数据，当 data 中的数据发生变化时，就会出发watch 中的 key
- watch 是一个对象： watch：{ }
- watch 可以设置多个类型的键值
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- 引入bootstrap --> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <!-- 引入 Vue --> <body> <div id="app"> <div class="container"> <!-- 在这里我使用了bootstrap，这里 bootstrap 的固定格式 --> <div class="row"> <form> <div class="form-group"> <label for="exampleInputEmail1"> 姓氏 </label> <input v-model = "firstName" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="请输入姓氏："> </div> <div class="form-group"> <label for="exampleInputPassword1"> 名字 </label> <input v-model = "lastName" type="text" class="form-control" id="exampleInputPassword1" placeholder=" 请输入名字 "> </div> <div class="form-group"> <label for="exampleInputPassword1"> 全名 </label> <input v-model = "fullName" type="text" class="form-control" id="exampleInputPassword1" placeholder=" "> </div> </form> </div> </div> </div> </body> <script> new Vue({ el: '#app', data: { firstName: '', lastName: '', fullName: '' }, watch: { //1. watch中可以设置方法，方法名就是data中的 key firstName ( val ) { console.log( val ) //改变后的值 this.fullName = val + this.lastName }, lastName ( val ) { this.fullName = this.firstName + val } } }) </script> - 使用方式（ 重点 ）
- 方法
watch: { // watch中可以设置方法，方法名就是data中的 key fn () {} } - 对象： （ 深度监听 ）
watch: { //= watch中可以设置方法，方法名就是data中的 key fn: { handler(){}, deep: true }
- 方法
-
方法事件处理器 methods
<body> <div id="app"> <button v-on:click = "helloHandler"> 点击 </button> <button @click = "helloHandler"> 点击 </button> <!-- 点击事件可以传参 --> <button @click = "helloHandler1( 200 )"> 点击 </button> <!-- 点击事件，事件对象也可以使用 --> <button @click = "helloHandler2"> 点击 </button> <!-- 自定义，事件对象在参数中的位置， 在函数执行时，传入一个实际参数 $event 来代表事件对象 --> <button @click = "helloHandler3( 10, $event ,20)"> 点击 </button> </div> </body> <script> /* v-on:eventType = " handlerName " 简写 v-on: --- > @ */ new Vue({ el: '#app', methods: { // 存放事件处理程序 helloHandler () { alert( 'hello' ) } //事件处理 传参 helloHandler1 ( a) { alert( a ) } // 事件对象也可以正常使用, 在事件处理程序中， 写e就可以了 helloHandler2 ( e) { alert( e ) } // 可以自定义 事件对象在参数中的位置。 helloHandler ( a,b,e ) { console.log( a ) console.log( b ) console.log( e ) } } }) -
内联处理器方法-computed
内联处理方法
将逻辑运算写在元素标签内。
不推荐这种写法，逻辑运算写在标签没会加重 视图层。
因此我们一般不用这种写法，只在标签内些一些简单的运算，例如：三目 -
事件修饰符 https://cn.vuejs.org/v2/guide/events.html
<!-- 阻止单击事件继续传播 , 也就是阻止冒泡--> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> -
按键修饰符
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="submit"> <!-- 可以直接用键盘字符，也可以直接用键盘码 -->
-
扫一扫
208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
