重庆智能网站建设费用,盐田网站设计,公司网站需要修改,高陵网站建设步骤#xff1a;
准备容器引包#xff08;开发版本/生产版本#xff09;创建实例new Vue()添加配置项 el指定挂载点data提供数据
准备容器
就是新建一个div标签
引包
vue2版本中文文档#xff1a;https://v2.cn.vuejs.org/v2/guide/ 尝试 Vue.js 最简单的方法是使用 …步骤
准备容器引包开发版本/生产版本创建实例new Vue()添加配置项 el指定挂载点data提供数据
准备容器
就是新建一个div标签
引包
vue2版本中文文档https://v2.cn.vuejs.org/v2/guide/ 尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件然后通过如下方式引入 Vue !-- 开发环境版本包含了有帮助的命令行警告 -- script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script 或者 !-- 生产环境版本优化了尺寸和速度 -- script srchttps://cdn.jsdelivr.net/npm/vue2/script 我目前也是初学者所以我导入开发环境版本。
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script创建实例
先实现一个最基本的helloworld。
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idapp{{ message }}
/div
scriptconst appnew Vue({//通过el配置选择器指定vue管理的是哪个盒子el:#app,//通过data提供数据data:{message:hello world}})
/script我写的div标签是在两个js脚本之间。 实际上div只要放在最后一个会修改它的script脚本之前就可以。
插值表达式
作用利用表达式进行插值渲染到页面中 表达式可以被求值的代码 语法{{表达式}} 支持的是表达式不是语句比如if和for。 不能在标签属性中使用插值表达式。
VSCode分栏显示 这需要安装扩展Live Preview。 直接在扩展商店搜索即可。
使用的数据需要存在
如果使用了不存在数据会报未定义的错误。
响应式数据
响应式数据改变视图会自动更新。 data中的数据会被添加到实例上 访问数据通过实例名.属性名 修改数据通过实例名.属性名新值
通过控制台命令修改
app.message
hello world
app.messageHelloWorld
HelloWorld截图 Vue调试插件
这个软件可以直接在edge加载项中搜索。 如果是chrome应用商店也有。 添加之后可以直接在Vue栏修改数据。
Vue指令
更多指令详见文档https://v2.cn.vuejs.org/v2/api/#%E6%8C%87%E4%BB%A4
v-html
插值表达式不能用在标签属性中意味着标签属性和类型不能修改。 如果想要修改。可以用vue指令实现这个需求。
script srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/script
div idapp{{ message }}div v-htmlmsg/div
/divscriptconst app new Vue({//通过el配置选择器指定vue管理的是哪个盒子el: #app,//通过data提供数据data: {message: hello world,msg: h1Hello World/h1}})
/script需要注意div v-htmlmsg/div标签需要在div idapp标签之内才能被选择。 可见v-html指令的作用就是把data中msg指向的字符串按html富文本解释一下。
v-show/v-if
v-show
作用控制元素显示隐藏通过css的display:none来控制显示隐藏。
v-if
作用控制元素显示隐藏条件渲染控制元素的创建和移除。 表达式值为false时v-show标签仍然存在css属性为styledisplay: none;。 v-if标签已经从源代码中被移除。
