好的设计教程网站,企业免费网站优化方案,专业网络推广,开发电商平台多少钱核心步骤
div idapp!-- 这里存放渲染逻辑代码 --h1{{ msg }}/h1a href#{{count}}/a
/div!-- 引入在线的开发版本核心包 --
!-- 引入核心包后全局可使用VUE构造函数 --
…核心步骤
div idapp!-- 这里存放渲染逻辑代码 --h1{{ msg }}/h1a href#{{count}}/a
/div!-- 引入在线的开发版本核心包 --
!-- 引入核心包后全局可使用VUE构造函数 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript// 创建VUE实例const app new Vue({el: #app,//指定VUE管理的是哪个盒子//通过data提供数据data: {msg: helloWorld,count:666}})
/script预览效果 测试下el指定管理的盒子
!doctype html
html langen
headmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/title
/headbody
!--
创建VUE实例初始化渲染
1 准备容器VUE所管理的范围
2 引包
3 创建实例
4 添加配置项-完成渲染
--
!-- box1和box2并没有配置到el中因此{{}}语法不生效 --
div classbox1box1_{{msg}}/div
div classbox2box2_{{count}}/divdiv idapp!-- 这里存放渲染逻辑代码 --h1{{ msg }}/h1a href#{{count}}/a
/div!-- 引入在线的开发版本核心包 --
!-- 引入核心包后全局可使用VUE构造函数 --
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript// 创建VUE实例const app new Vue({el: #app,//指定VUE管理的是哪个盒子//通过data提供数据data: {msg: helloWorld,count:666}})
/script/body
/html预览效果
总结 TIP 1vscode需要安装open in browser才能使用altb预览当前html 2、每次更改代码后需要ctrls手动保存 3、vue的{{}}语法用于拿到data中的数据
