标签:bsp node ret 数据驱动 命令 代码 最新 template har
vue是国人开发的一个js框架,国人用得比较多。
jQuery基于dom操作
Vue框架以数据驱动、组件化开发为核心
如果安装了node,执行命令 npm install vue 下载vue.js,可在vue后面加上 @版本号 指定要下载的vue.js版本,未指定时默认下载最新稳定版。
在代码中引入下载的vue.js:
<script type="text/javascript" src="vue.js"></script>
上线时要换为生产版 vue.min.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <!--留坑,后续填数据 --> <div id="app"></div> <div class="red"></div> <div></div> <script> new Vue({ el:‘#app‘, //通过id来指定 template:‘<p>hello vue1</p>‘ //要填充的内容。可以去嵌套元素,比如‘<div><p></p></div>‘;但只能有一个根元素,‘<div></div><div></div>‘这样就不行 }); new Vue({ el:‘.red‘, //通过class来指定 template:‘<p>hello vue2</p>‘ }); new Vue({ el:‘div‘, //通过元素名来指定。不常用,因为控制不精细 template:‘<p>hello vue3</p>‘ }); </script> </body> </html>
new Vue()只会产生一个Vue对象,只能填一个坑。
比如有2个<div class="red">,一个new Vue()只能填一个。
<div id="app"></div> <script> new Vue({ el:‘#app‘, template:‘<p>姓名:{{name}},年龄:{{age}}</p>‘, //可以用{{ }}占位 data:function(){ return{ name:‘chy‘, //数据 age:20, } } }); </script>
标签:bsp node ret 数据驱动 命令 代码 最新 template har
原文地址:https://www.cnblogs.com/chy18883701161/p/12609088.html