搜索到
26
篇与
的结果
-
el与data的两种写法 el的两种写法：new Vue时配置el属性先创建Vue实例，之后通过vm.$mount('#root')指定el的值data的两种写法：对象式函数式（使用组件时，必须使用函数式）注：由Vue管理的函数，不能写箭头函数（作用域）<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4.el与data的两种写法</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好，{{name}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 //el的两种写法 /* const vm = new Vue({ //指定当前实例为哪个容器服务 //写法一 // el: '#root', data: { name: '孙笑川' } }) //写法二 vm.$mount('#root') */ new Vue({ el: '#root', //写法一：对象式 // data: { // name: '孙笑川' // } //写法二：函数式 data: function () { console.log(this) //此处的this是Vue实例 return{ name: '孙笑川' } } }) </script> </body> </html> -
模板语法 插值语法用于解析标签体内容，{{xxx}} xxx是js表达式，且可以直接读取到data中的所有属性指令语法用于解析标签（包括：标签属性、标签体内容、绑定事件）例：v-bind:href="xxx" 或简写为:href="xxx"<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>插值语法</h1> <h3>你好，{{name}}</h3> <hr> <h1>指令语法</h1> <a v-bind:href="url">点我跳转</a> <a :href="url">你好，{{person.name}}</a> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ //指定当前实例为哪个容器服务 el: '#root', data: { name: '孙笑川', url: 'https://www.wangchouchou.com', person: { name: '药水哥' } } }) </script> </body> </html>
