day030

最新推荐文章于 2024-08-08 23:04:40 发布

发电机箱

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量67

点赞数

分类专栏：学习文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/qq_41916663/article/details/120368557

版权

学习专栏收录该内容

43 篇文章 0 订阅

订阅专栏

		←stringify()

JSON字符串-----------------JS对象

		parse()方法→

导向:数据传输导向:元素调用

语法
JSON数据:
var a =’ “firstName” : “John” ’

JSON 对象:
var a = ‘{ “firstName”:“John” , “lastName”:“Doe” }’

JSON 数组:
var a = ‘[
{ “firstName”:“Bill” , “lastName”:“Gates” },
{ “firstName”:“George” , “lastName”:“Bush” }
]’;

使用JS里的内置对象JSON.
用来把以 JSON 格式写的字符串和原生 JavaScript 对象互转.

给服务器发送数据: 将JS对象转成JSON字符串 JSON.stringify(Js对象)
接受服务器的数据: JSON字符串转成JS对象 JSON.parse(“json字符串”)

	<script>
		//定义函数,点击div1时触发
		function test1(){

			// 1. json字符串,对象的写法
			var a ='{"name":"jack","age":"20"}';

			// 2. json字符串,数组的写法
		var b ='[{"name":"tony","age":"20"},{"name":"rose","age":"30"}]';

			//3. JSON对象

			//3.1 json字符串的转成js对象:目的是方便的调用对象封装的属性
				var jsobj = JSON.parse(a);//json字符串的转成js对象
				console.log(jsobj);//{name: 'jack', age: '20'}
				console.log(jsobj.name);//获取对象里name属性的值
				console.log(jsobj.age);//获取对象里age属性的值
				//需求: 利用dom技术,把解析到的name属性的值,展示在id="d2"位置
				document.getElementById("d2").innerHTML=jsobj.name ;

		//练习:
				var jsobj2 = JSON.parse(b);//json字符串的转成js对象
				console.log(jsobj2);//类似于数组结构
				console.log(jsobj2[1].name);//获取到数组里第二个对象的name属性的值
				console.log(jsobj2[0].age);//获取到数组里第一个对象的age属性的值
				//需求: 利用dom技术,把解析到的20,展示在id="d3"位置
				document.getElementById("d3").innerHTML = jsobj2[0].age ;

			//3.2 js对象转成json字符串:目的是方便的操作字符串,也可以发送给服务器
				//创建js对象
				var obj = { name:"jack" , age:20 } ;
				var jsonstr = JSON.stringify(obj);//js对象转成json字符串
				console.log(jsonstr);//得到json字符串
				console.log(jsonstr.length);//获取字符串的长度
				console.log(jsonstr.concat('hello'));//拼接字符串
		}
	</script>
























	<!-- 1. 引入外部的vue.js文件 -->
	<script src="vue.js"></script>

<body>
	<!-- 2. 准备数据渲染区  {{插值表达式}}-->
	<div id="app">
		{{msg}}
	</div>
	
	<!-- 3. 使用Vue准备数据 -->
	<script>
		// 3.2 准备即将要在浏览器展示的数据
		var d = {
			msg:'hello vue~'
		}
		// 3.1 创建Vue对象
		new Vue({
			//element的简称,即将把准备好的数据 渲染 到指定区域--挂载点
			//#app 是利用CSS的id选择器,选中了一个HTML元素
			el:"#app",
			data: d //准备即将要在浏览器展示的数据
		})
	</script>
</body>

前端项目文件下
创建JS目录
CSS目录
HTML目录
分别保存对应文件

高级用法：v-命令
指令集
指令是带有 v- 前缀的特殊属性，以表示它们是 Vue 提供的特殊特性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

常见的Vue指令:
双向绑定 v-model
闪现 v-cloak
判断 v-if
循环 v-for
事件 v-on
绑定 v-bind

双向绑定:(实时更新)
通过指令v-model，实现双向绑定，修改一方同时修改相同的另一方，达到数据同时更新。

MVVM是将"数据模型双向绑定"的思想作为核心，
在View和Model之间没有联系，
通过ViewModel进行交互，
而且Model和ViewModel之间的交互是双向的，
因此View视图的数据的变化会同时修改Model数据源，
而Model数据源数据的变化也会立即反应到View视图上。

一.什么是组件？
组件 (Component) 是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。
在有些情况下，组件也可以表现为用is特性进行了扩展的原生 HTML 元素。

	<div id="app">
		<!-- 5.使用组件 -->
		<hellocom></hellocom>
	</div>


	//4.创建Vue组件:类似拓展了HTML的标签
	//Vue.component(1,2)  1是组件名,2是组件的显示效果
	Vue.component('hellocom',{
		template:'<h1>你好 Vue组件</h1>',
	})
	//------------必须先绑定好组件,再去new Vue-------------
	new Vue({
		el:"#app",
	})

Vue的生命周期 lifecycle
生命周期函数：

vue实例在某一个时间点会自动执行这些函数；
生命周期钩子函数不允许写成箭头函数；
可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后），运行中（更新前/后），销毁（销毁前/销毁后）

npm 概念
npm（node package manager）：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

webpack 概念
Webpack是前端自动化
构建工具，
它基于nodejs实现，
可以帮助我们实现资源的合并、打包、压缩、混淆的诸多功能。

可以快速构建一个Vue项目，
包括各类文件（assets资源、scripts脚本、images图片、styles样式）。

vue-cli脚手架
作用
vue脚手架指的是vue-cli，
它是一个专门为单页面应用快速搭建繁杂的脚手架，
它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

想完成Vue项目,必须下载vue-cil脚手架

vue-cli是由Vue提供的一个官方cli，
专门为单页面应用快速搭建繁杂的脚手架。

它是用于自动生成vue.js+webpack的项目模板，
是为现代前端工作流提供了 batteries-included 的构建设置。

只需要几分钟的时间就可以运行起来并带有热重载，
保存时 lint 校验，以及生产环境可用的构建版本

装nodejs并验证
安装nodejs,下一步下一步就可以,可以安装最新的15版本,win7的话可以安装14版本.使用以下dos命令提示符下执行：

node -v # v8.11.3，至少8以上,最新的是v15.11.0

配置npm
Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像

npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像

npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/

参数说明
注意单词的大小写

-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-g 全局安装，全拼： --global

脚手架安装
vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g #安装vue-cli脚手架—可能比较慢,要等几分钟

D:\WorkSpace\VUE>vue init webpack jt01

? Target directory exists. Continue? Yes
? Project name jt01
? Project description A Vue.js project
? Author ZIBAOCIGUAI 2986335665@qq.com
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run npm install for you after the project has been created? (recommended) npm

vue-cli · Generated “jt01”.

Installing project dependencies …

========================

…

added 1276 packages, and removed 2 packages in 2m

Project initialization finished!

========================

To get started:

cd jt01
npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

D:\WorkSpace\VUE>cd jt01

D:\WorkSpace\VUE\jt01>npm run dev

jt01@1.0.0 dev
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

13% building modules 26/31 modules 5 active …x=0!D:\WorkSpace\VUE\jt01\src\App.vue{ parser: “babylon” } is deprecated; we now treat it as { parser: “babel” }.
95% emitting

DONE Compiled successfully in 3003ms 下午5:52:36

I Your application is running here: http://localhost:8080

http://localhost:8080在此做我们的vue项目

发电机箱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day030

←stringify()JSON字符串-----------------JS对象 parse()方法→导向:数据传输导向:元素调用语法JSON数据:var a =’ “firstName” : “John” ’JSON 对象:var a = ‘{ “firstName”:“John” , “lastName”:“Doe” }’JSON 数组:var a = ‘[{ “firstName”:“Bill” , “lastName”:“Gates” },{ “first..
复制链接

扫一扫