分析初识vue小案例
前言
我们已经写好了一个案例:初识vue小案例
接下来我们就分析初识vue小案例
容器和vue实例是一一对应的!
容器和vue实例应该是一一对应的,不允许出现一对一或者一对多
下面是一个一个容器对多个实例的例子,这里我们把id选择器换成类选择器了
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>初始vue</title><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备一个容器 --><div id="root"><!-- {{xxx}}是vue中的插值语法 --><h1>hello,{{name}},我今年{{age}}岁了</h1></div><div id="root"><!-- {{xxx}}是vue中的插值语法 --><h1>hello,{{name}},我今年{{age}}岁了</h1></div><p #a></p><script type="text/javascript">// 设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip= false // 创建一个vue实例new Vue({// 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,el:'#root', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串data:{ // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式name:'vue',age:'18'}})</script></body></html>
页面上第二个容器是无法解析的
然后是一个容器对应两个实例,很明显也是不行的
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>初始vue</title><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备一个容器 --><div id="root"><!-- {{xxx}}是vue中的插值语法 --><h1>hello,{{name}},我今年{{age}}岁了</h1></div><p #a></p><script type="text/javascript">// 设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip= false // 创建一个vue实例new Vue({// 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,el:'#root', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串data:{ // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式name:'vue',age:'18'}})// 创建一个vue实例new Vue({// 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,el:'#root', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串data:{ // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式name:'java',age:'28'}})</script></body></html>
只有一个容器对一个实例才是正常的
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>初始vue</title><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备一个容器 --><div id="root"><!-- {{xxx}}是vue中的插值语法 --><h1>hello,{{name}},我今年{{age}}岁了</h1></div><div id="root1"><!-- {{xxx}}是vue中的插值语法 --><h1>hello,{{name}},我今年{{age}}岁了</h1></div><p #a></p><script type="text/javascript">// 设置为 false 以阻止 vue 在启动时生成生产提示。Vue.config.productionTip= false // 创建一个vue实例new Vue({// 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,el:'#root', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串data:{ // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式name:'vue',age:'18'}})// 创建一个vue实例new Vue({// 属性通常为key:value的形式 key是不能变得,value可以变,多个key之前用,分割 最后一个key不写,el:'#root1', // el就是的简写element,用于指定当前vue实例为哪个容器服务,值通常为css选择器字符串data:{ // data用于存储数据,数据供el所指定的容器使用,可以存好几个值 也是key:value的形式name:'java',age:'28'}})</script></body></html>
容器里面vue插值语法{{}}只能写js表达式
{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
如果写一个不存在data的属性肯定是不可以的
但是写一些其他的是可以的,比如1+1,Date.now(),这些都是js的表达式
一旦data中的数据发生变化,那么页面中用到该数据的地方也会自动更新
我们可以通过谷歌vue插件观察并且发现vue的值变化
同时可以点击value进行修改,点击后面的笔进行编辑,然后点击保存按钮保存
初识vue总结
1 想让vue工作,就必须创建一个vue实例,并且传入一个配置对象(容器)
2 root容器里的代码仍然符合html规范,只不过混入了一些特殊的vue语法
3 root容器里的代码被称为vue模板
4 vue实例和容器是一一对应的
5 真实开发中只有一个vue实例,并且会配合着组件一起使用
6 {{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
7 一旦data中的数据发生变化,那么页面中用到该数据的地方也会自动更新
分析初识vue小案例相关推荐
- vue小案例(小黑记事本和购物车)
vue小案例 小黑记事本小案例 <footer class="footer" ><span class="todo-count" v-if=& ...
- Vue小案例1:计数器
Vue小案例1:计数器 html页面: 准备两个按钮分别绑定两个事件对应加减add,sub:还有一个span容器放置数据,样式自己写没有太大要求 <div id="app"& ...
- Vue小案例——图书列表
图书列表 案例显示 HTML 结构 CSS 样式 提供的静态数据 把提供好的数据渲染到页面上 对页面进行事件绑定 逻辑层次的JS代码 案例显示 图书列表 实现静态列表效果 基于数据实现模板效果 处里每 ...
- Vue(小案例_vue+axios仿手机app)_实现用户评论
一.前言 1.渲染评论列表 2.点击加载按钮,加载更多 3.提交评论 二.主要内容 1.评论列表一般是注册到一个全局的公共组件中 2.请求后台数据,渲染评论列表 (1)数据格式如下 地址 /ap ...
- Vue小案例 之 商品管理------创建页面与部分数据
logo的路径: 页面的初始布局: 初始的HTML: <div id="container"><!--logo title--><div class= ...
- Vue小案例 之 商品管理------添加商品
进行添加button,以及商品列表的创建 html: <div class="form-btn"><button>确认添加</button>&l ...
- Vue小案例-小黑记事本的实现
小黑记事本综合应用了前面学习的集中指令,并且对指令进行综合性的基础应用联系.(样式没有写,仅实现了vue指令的功能.) <!DOCTYPE html> <html lang=&quo ...
- 初识hibernate小案例
使用hibernate前需要导入相关JAR包. 1.它可以接受词文法语言描述,并能产生识别这些语言的语句的程序 2.是一个Java的XML API,类似于jdom,用来读写XML文件的 3.支持注解配 ...
- axios vue 回调函数_Vue 02 —— Vue 入门小案例~使用 Axios 中的GET、POST请求
作为后端攻城狮,写前端代码是一种什么体验? 相信不少人和 @Python大星 一样,有写过前端代码的经历. 记录一下,Vue 框架开发中"啼笑皆非"的故事,非专业前端人员,该案例无 ...
最新文章
- 2021年春季学期-信号与系统-第三次作业参考答案-第十一道题
- Pyhton 模块和包
- Redhat Linux 防火墙
- linux 启动mongodb
- windows ffmpeg 的安装
- mysql 枚举_是否推荐使用MySQL的enum类型?
- spring 事件模型_Spring–设计领域模型和服务层
- 宝塔+wordpress搭建/迁移网站
- 聚类(Clustering): K-means算法
- 常用的作业调度算法应用练习
- web前端项目详解:OPPO首页进度条特效(定时轮播)
- 避坑 | 早跟你说了不要写 hardcode!
- 关于el-form中的rules未生效问题的解决方法
- windows 串口中断编程_万变不离其宗之单片机串口共性问题
- 强化学习的数学基础2---PPO算法
- CSS垂直居中的11种实现方式
- java计算101~200之间的素数
- 今天是本学期的第几周的第几天? (15 分) C语言
- Unity第一视角流血受伤受攻击屏幕流血效果
- matlab中加载数据方式,【转帖】Matlab数据导入方法