vue第一课

最新推荐文章于 2022-09-26 15:22:18 发布

学习仪式感

最新推荐文章于 2022-09-26 15:22:18 发布

阅读量130

点赞数

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_42001445/article/details/115876945

版权

笔记专栏收录该内容

71 篇文章 0 订阅

订阅专栏

引入vue.js(和jq差不多)
使用vue.min.js引入
https://cdn.staticfile.org/vue/2.2.2/vue.min.js引入都可以。
第一个vue实例；

	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">{{text}}</div>
<script>
	new Vue({
		el: '#app',
		data: {
			text: 'Hello Vue.js!'
		}
	})
</script>
</body>

在这里插入图片描述
创建一个vue对象，使用双括号赋值，app就是容器。vue的形式大体都是如此。

<p>{{text}}</p>
<p v-text="text"></p>
<p v-html="text"></p>

{{text}},v-text=“text”,v-html="text"都可以来表示text的值；
在这里插入图片描述
不同的地方在于
{{text}}：在加载脚本之前会以双花括号的形式被客户看到，而且在其之中写上html标签也不会被解析；
v-text：加载脚本完毕后才会显示，无法解析html标签
v-html：加载脚本完毕后才会显示，可以解析html标签，但是v-html可能会存在被不法分子利用做些事情。
修改vue对象：

new Vue({
		el: '#app',
		data: {
			text: '<strong>Hello Vue.js!</strong>'
		}
	})

在这里插入图片描述
第二个例子(动态属性绑定)

<div id="app">
<a v-bind:href="url">第一种</a>
<a :href="url">第二种</a>
<a href="https://www.baidu.com/">第三种</a>
	</div>
<script>
	new Vue({
		el: '#app',
		data: {
			url: 'https://www.baidu.com/'
		}
	})
</script>

v-bind
使用标签v-bind绑定属性href，并且让其等于我们定义的值url。第二种为第一种的简写方式，实现的效果和普通的a标签第三种一样。

<body>
<div id="app">
<a :href="getYdUrl()">方法的使用</a>
<a :href="getUrl">{{getUrl}}</a>
</div>
<script>
	new Vue({
		el: '#app',
		data: {
			urlOne:'https://www.',
			urlTwo: 'baidu.com/'
		},
		methods:{
			getYdUrl:function(){
				return this.urlOne+this.urlTwo;
			}
		},
		computed:{
			getUrl:function(){
				return this.urlOne+this.urlTwo;
			}
		}
	})
</script>
</body>

methods，computed
加一个属性methods是定义方法的使用，this表示当前对象，在绑定处可以直接把方法写进去。
这里使用methods属性写了个getYdUrl方法，并且return返回this.urlOne+this.urlTwo;其结果和上面那种一样，可以直接访问百度主页。
methods一般不做属性值的输出，一般是用来写方法的，computed更适合属性值的输出，而且写起来也方便；
重要区别：computed如果依赖的条件不变只会加载一次方法，methods每次都会重新加载方法；
侦听器watch

<body>
<div id="app">
<a :href="url">{{url}}</a>
</div>
<script>
	var firstVue=new Vue({
		el: '#app',
		data: {
			urlOne:'https://www.',
			urlTwo: 'baidu.com/',
			url:'xxx'
		},
		watch:{
			urlone:function(newYdValue,oldYdValue){
				this.url=newYdValue+this.urlTwo;
			}
		}
	})
</script>
</body>

默认展示
在这里插入图片描述

在这里插入图片描述
给urlOne赋值后，url展示效果如上。监听了urlOne的改变，当url改变后其效果也跟着改变,可以多次输入多次改变。

watch:{
			urlOne:{
				immediate:true,
				handler:function(newSnValue,OldSnValue){
					this.url=newSnValue+this.urlTwo;
				}
			}
		}

在这里插入图片描述

修改侦听器里面的值添加 immediate:true属性，默认为false，当加了这个属性后，默认为加载监听器里的内容，默认为不加载侦听器里的内容；默认展示，修改其值后依然可以被监听到。

var firstVue=new Vue({
		el: '#app',
		data: {
			location:{
				urlOne:'https://www.',
				urlTwo: 'baidu.com/'
			},
			url:'xxx'
		},
		watch:{
			location:{

				immediate:true,
				handler:function(newSnValue,OldSnValue){
					this.url=newSnValue.urlOne+newSnValue.urlTwo;
				}
			}
		}
	})

如果多层嵌套后，再给urlOne赋值会发现没有效果了，
在这里插入图片描述

watch:{
			location:{
				deep:true,
				immediate:true,
				handler:function(newSnValue,OldSnValue){
					this.url=newSnValue.urlOne+newSnValue.urlTwo;
				}
			}
		}

修改监听器添加deep:true的属性再次进行赋值发现可以成功赋值。
在这里插入图片描述

安装node.js
下载安装12版本之上
安装vue
cmd，以管理员身份打开命令行运行：npm install -g @vue/cli 直接安装；
安装visual studio code
进入界面按快捷键Ctrl+Shift+X，输入Language Packs，选择中文选项，然后重启软件即可。
启动第一个vue项目；
随意创建文件夹F:\nodejs\nodejs代码\first；
将文件夹拖动至visual studio code
然后再first下创建第一个01vuecli文件夹，右键文件夹打开终端，第一次创建项目vue create testapp;
在这里插入图片描述
这时我们在菜单中找到

右键以管理原身份运行，输入set-executionpolicy remotesigned即可。
再次打开visual studio code软件，输入vue create testapp

选择第三个选项手动创建项目。
在这里插入图片描述
按空格键选择哪个功能,再按空格键取消。
Babel:编译
TypeScript:
Progressive web App…：渐进式个别公司在用，我们用不到，配置一些图标之类的。
Router：路由
Vuex：状态管理
CSS Pre-processors:css预处理器
Linter / Formatter:代码格式化处理
Unit Testing:单元测试
E2E Testing:端对端测试
在这里插入图片描述
1：单独的文件
2：想要所有的配置都在一个文件里面选择第二个

是否保存内容
如果选择yes，并且命名后，下次再创建时，就可以直接选择我们保存的内容进行创建。
pubic：

学习仪式感

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue第一课

安装node.js下载安装12版本之上安装vuecmd，以管理员身份打开命令行运行：npm install -g @vue/cli 直接安装；安装visual studio code进入界面按快捷键Ctrl+Shift+X，输入Language Packs，选择中文选项，然后重启软件即可。启动第一个vue项目；随意创建文件夹F:\nodejs\nodejs代码\first；将文件夹拖动至visual studio code然后再first下创建第一个01vuecli文件夹，右键文件夹打
复制链接

扫一扫