导入js文件使用方式
1、vue 基本格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 基本格式</title> </head> <body> ? <div id="app"> {{message}} </div> ? <script src="../js/vue.min.js"></script> ? <script> const vm = new Vue({ el: ‘#app‘, data: { message: ‘hello vue !‘ } }); </script> </body> </html>
2、vue 条件语句
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 条件语句</title> </head> <body> ? <div id="app"> <h1 v-if="flag===‘user‘">user</h1> <h1 v-else-if="flag ===‘admin‘">admin</h1> <h1 v-else>other</h1> </div> ? <script src="../js/vue.min.js"></script> ? <script> const vm = new Vue({ el: ‘#app‘, data: {flag: ‘admin‘} }); </script> </body> </html>
3、vue 循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue for循环</title> </head> <body> ? <div id="app"> <li v-for="item in items"> {{item.message}} </li> </div> ? <script src="../js/vue.min.js"></script> ? <script> const vm = new Vue({ el: ‘#app‘, data: { items: [ {message: ‘张三‘}, {message: ‘李四‘}, {message: ‘王五‘}, {message: ‘赵六‘} ] } }); </script> </body> </html>
4、vue 点击事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 点击事件</title> </head> <body> ? <div id="app"> {{message}} <hr> <button v-on:click="sayHi()">按钮1</button> <button @click="sayHi()">按钮2</button> </div> ? <script src="../js/vue.min.js"></script> ? <script> const vm = new Vue({ el: ‘#app‘, data: {message: ‘hello vue !‘}, methods: { sayHi: function () { alert(this.message) } } }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-mode 双向绑定</title> </head> <body> ? <div id="app"> {{text}} <br> 输入的文本：<input type="text" v-model="text"> ? <hr> 性别： <input type="radio" name="sex" value="男" v-model="flag">男 <input type="radio" name="sex" value="女" v-model="flag">女 <br> 选中了谁：{{flag}} ? <hr> 下拉框： <select name="" id="" v-model="selected"> <option value="" disabled>-- 请选择 --</option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> <br> 选中了谁：{{selected}} </div> ? <script src="../js/vue.min.js"></script> ? <script> const vm = new Vue({ el: ‘#app‘, data: { text: ‘message‘, flag: ‘男‘, selected: ‘‘, } }); </script> </body> </html>
6、vue 组件及数据绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 组件及数据绑定</title> </head> <body> ? <div id="app"> <!--v-bind: 属性不能使用驼峰命名--> <reflect v-for="item in items" v-bind:reflect_data="item"></reflect> </div> ? <script src="../js/vue.min.js"></script> <script> //定义一个 Vue 组件 Vue.component(‘reflect‘, { props: [‘reflect_data‘], template: ‘<li>{{reflect_data}}</li>‘ }) const vm = new Vue({ el: ‘#app‘, data: { items: [‘java‘, ‘php‘, ‘js‘] } }); </script> </body> </html>
7、Vue-axios 基本格式
准备一个json
{ "name": "狂神说java", "url": "https://blog.kuangstudy.com", "page": 1, "isNonProfit": true, "address": { "street": "含光门", "city": "陕西西安", "country": "中国" }, "links": [ { "name": "bilibili", "url": "https://space.bilibili.com/95256449" }, { "name": "狂神说java", "url": "https://blog.kuangstudy.com" }, { "name": "百度", "url": "https://www.baidu.com" } ] }
axios应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue-axios 基本格式</title> </head> ? <style> /*解决加载数据时显示模板问题，在填充数据之前隐藏*/ [v-cloak] { display: none; } </style> <body> ? <div id="app" v-cloak> <div>{{info.name}}</div> <div>{{info.address.city}}</div> <a v-bind:href="info.url">{{info.url}}</a> <hr> <li v-for="item in info.links"> <a v-bind:href="item.url">{{item.name}}</a> </li> </div> ? <script src="../js/vue.min.js"></script> <script src="../js/axios.min.js"></script> ? <script> const vm = new Vue({ el: ‘#app‘, data() { return { info: { //请求返回去参数格式必须和 json 字符串一样 name: ‘‘, url: ‘‘, page: ‘‘, isNonProfit: ‘‘, address: { street: ‘‘, city: ‘‘, country: ‘‘, }, links: [] } } }, mounted() { //钩子函数 axios.get(‘../json/data.json‘).then(res => { this.info = res.data; }) } }); </script> </body> </html>
8、Vue 计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue 计算属性</title> </head> <body> ? <div id="app"> {{message}} <p>currentTime1:{{currentTime1()}}</p> <p>currentTime2:{{currentTime2}}</p> </div> ? <script src="../js/vue.min.js"></script> ? <script> const vm = new Vue({ el: ‘#app‘, data: { message: ‘hello vue !‘ }, methods: { currentTime1: function () { //返回当前时间戳 return Date.now(); } }, /** * 调用方法时，每次都需要进行计算，既然有计算过程必然会产生系统开销。 * 那如果这个结果是不经常变化的呢？ * 此时就可以考虑将这个结果缓存起来，采用计算属性就可以很方便的做到这点。 * 计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统开销 */ computed: { //计算属性，与 methods 中的方法不能重名，重名之后只会调用 methods 中的方法 //currentTime2 是一个属性 currentTime2: function () { return Date.now(); } } ? }); </script> </body> </html>
9、slot 插槽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot 插槽</title> </head> <body> ? <div id="app"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="item in items" :item="item"></todo-items> </todo> </div> ? <script src="../js/vue.min.js"></script> ? <script> // slot 插槽组件 Vue.component(‘todo‘, { template: ` <div> <slot name="todo-title"></slot> <ul> <li><slot name="todo-items"></slot></li> </ul> </div>` }) ? Vue.component(‘todo-title‘, { props: [‘title‘], template: ` <div>{{title}}</div>` }) ? Vue.component(‘todo-items‘, { props: [‘item‘], template: ` <li>{{item}}</li>` }) const vm = new Vue({ el: ‘#app‘, data: { title: ‘java系列课程‘, items: [‘javaSE‘, ‘linux‘, ‘redis‘, ‘mysql‘] } }); </script> </body> </html>
10、自定义事件分发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义事件分发</title> </head> <body> ? <div id="app"> <todo> <todo-title slot="todo-title" :title="title"></todo-title> <todo-items slot="todo-items" v-for="(item,index) in items" :item="item" @remove1="removeItem(index)"></todo-items> </todo> </div> ? <script src="../js/vue.min.js"></script> ? <script> // slot 插槽 Vue.component(‘todo‘, { template: ` <div> <slot name="todo-title"></slot> <ul> <li><slot name="todo-items"></slot></li> </ul> </div>` }) ? Vue.component(‘todo-title‘, { props: [‘title‘], template: ` <div>{{title}}</div>` }) ? Vue.component(‘todo-items‘, { props: [‘item‘, ‘index‘], template: ` <li>{{item}} <button @click="remove()"> -</button> </li>`, methods: { remove: function () { this.$emit(‘remove1‘) //自定义事件分发 } } }) const vm = new Vue({ el: ‘#app‘, data: { title: ‘java系列课程‘, items: [‘javaSE‘, ‘linux‘, ‘redis‘, ‘mysql‘] }, methods: { removeItem: function (index) { console.log(‘删除了 ‘ + this.items[index] + ‘ 元素‘); //数组操作：splice(n,m,‘a‘...) 删除第 n 个元素后面的 m 个元素，并追加 a... 等元素 this.items.splice(index, 1) //删除当前元素 } } }); </script> </body> </html>