电商系统前后端开发（Vue+SSM）(1)

tech2022-08-10 142

1 Vue

渐进式的 js 框架

1.1 VM 实现原理

1.2 其他 MVVM 实现者

1.3 vue CDN

https://www.bootcdn.cn/ https://www.bootcdn.cn/vue/2.6.10/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 测试案例</title> </head> <body> <div id="app"> <span>  {{title}} </span> <input type="text" v-model="title"> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script> new Vue({ // json对象，大括号包裹，里面放了键值对，在 js 中键可以没有引号 el:'#app', // element data:{ // 以后数据就是通过发送 ajax 请求获取 // 以前是把数据放到域对象中，所以需要前后端一起开发 title: "你好，Vue", } }) </script> </html>

2 插值表达式

不能写在 html 的标签中，不能作为属性的值得部分

3 MVVM 双向数据绑定v-model

将标签的 value 值与 vue 实例中的 data 属性值进行绑定

4 事件绑定 v-on

通过配合具体的事件名，来绑定 vue 中定义的函数 <body> <div id="app"> <span>  {{title}} </span> <input type="text" v-on:input="changeTitle"> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script> new Vue({ el:'#app', data:{ title: "你好，Vue", }, methods:{ changeTitle:function (){ console.log("changeTitle:") } } }) </script>

4.1 补充 v-on

在响应函数里，可以指明使用 event 内置的参数对象。该对象表示当前事件，可以通过 event.target.value 来获得当前事件对象的 value 的值可以简写 v-on:input <==> @input <body> <div id="app"> <span>  {{title}} </span> <input type="text" v-on:input="changeTitle"> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script> new Vue({ el:'#app', data:{ title: "你好，Vue", }, methods:{ changeTitle:function (event){ // event 事件对象的 value console.log(event.target.value) this.title = event.target.value } } }) </script>

4.2 this 的用法

表示当前 vue 对象

5 属性绑定 v-bind

html 中的所有属性，都不能使用插值表达式可以简写 <body> <div id="app"> {{link}} <a v-bind:href="link">百度</a> <a :href="link">百度2</a> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script> <script> new Vue({ el:'#app', data:{ link:"http://www.baidu.com", }, }) </script>

6 v-once 指令

此时该标签的插值表达式，只获取一次，之后数据的变化不影响此插值

7 v-html

8 v-text

最新回复(0)