芜湖哪里有做网站的,电子商务的网站建设分析,vivo手机为什么建设网站,做影集的网站或软件下载文章目录 Vue是什么1.创建一个Vue实例2.插值表达式{{ }}3.Vue的响应式特性4.开发者工具的安装 Vue是什么
概念#xff1a;Vue是一个用于构建用户界面的渐进式框架 ①构建用户界面#xff1a;基于数据渲染出用户看到的界面 ②渐进式#xff1a;循序渐进 ③ 框架#xff1… 文章目录 Vue是什么1.创建一个Vue实例2.插值表达式{{ }}3.Vue的响应式特性4.开发者工具的安装 Vue是什么
概念Vue是一个用于构建用户界面的渐进式框架 ①构建用户界面基于数据渲染出用户看到的界面 ②渐进式循序渐进 ③ 框架一套完整的项目解决方案 1.创建一个Vue实例 body
!--创建Vue实例初始化渲染1.准备容器Vue所管理的范围2.引包开发版本/生产版本官网3.创建实例4.添加配置项完成渲染 --
div classbox2/div
div classbox/div
div idapp!--这里将来会编写一些用于渲染的代码 --!--一个插值表达式的语法{{...}},前后要有空格--h1{{ msg }}/h1a href#{{ count }}/a
/div
!--引入的是开发版本的包 --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscript
//一旦引入Vuejs核心包在全局环境就有了 Vue 构造函数
const appnew Vue({//通过el配置选择器指定Vue所管理的是哪个盒子el:#app,//通过date提供数据data:{msg:hello 黑马,count:666}
})
/script2.插值表达式’{{ }}’
插值表达式 插值表达式是一种Vue的模板语法 **1.作用**利用表达式进行插值渲染到页面中 表达式是可以被求值的代码JS引擎会将其计算出一个结果 2.语法{{ 表达式 }}
body
h3{{ title }}/h3
p{{ nickname.toUpperCase() }}/p
p{{ age18? 成年:未成年 }}/p
p{{ obj.name }}/p
/body3.注意点 1使用的数据必须存在data
p{{ hobby }}/p2支持的是表达式而非语句比如2if for…
p{{ if }}/p3不能在标签属性中使用{{ }}插值
p title{{ username }}我是p标签/pbody
!--插值表达式;Vue的一种模板语法作用利用 表达式 进行插值渲染 语法{{ 表达式 }}注意点1使用的数据要存在2.支持的形式不是语句if for3.不能在标签中使用{{ }}
--div idapp{{ nickname }}{{ nickname.toUpperCase }}!--将nickname里面的内容全都转成大写--{{ nickname 你好 }}{{ age18 ? 成年:未成年 }}{{ friend.name }}{{ friend.desc }}/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el:#app,data:{nickname:tonyage:18,//成年friend:{name:jepson,desc:热爱学习 Vue}})/script
/body3.Vue的响应式特性 4.开发者工具的安装 在第三部分中是通过控制台修改数据的但我们可以用开发者工具更方便快捷的调试修改数据极简插件
