前端 -> Vue.js 教程

前端 -> Vue.js 教程文章目录css预处理器idea安装vue插件vue导包:vuecdn:百度or官网v-bind:指令绑定v-if,v-else,v-else-if判断v-for遍历事件v-onvue7个常用属性v-model:双向绑定template:组件axios:通信计算属性插槽slot删除splice自定义事件(不懂)vue入门小结安装node.js第一个vue-cli应用安装webpack使用webpackvue-router路由运行![在这里插入图片描述](https://img-blog.csdni

Vue.js 安装

蓝奏云下载:

声明式渲染

  • el:用选择器找到对应的元素
  • {
    {xx}}
    :里面的数据对应着new出来的vue中的data的数据
	<div id="app">
	  { 
   { 
    message }} { 
   { 
   name}}
	</div>
	
	<script type="text/javascript">
	var app = new Vue({ 
   
		el: '#app',
		data: { 
   
			message: 'Hello Vue!',
			name : "Vue"
		}
	});
	</script>

在这里插入图片描述

使用v-bind绑定指令

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>
var app2 = new Vue({ 
   
  el: '#app-2',
  data: { 
   
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

在这里插入图片描述

css预处理器

在这里插入图片描述

idea安装vue插件

在这里插入图片描述
在这里插入图片描述

vue导包:vue cdn:百度or官网

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

v-bind:指令 绑定

在这里插入图片描述在这里插入图片描述

v-if,v-else,v-else-if 判断

在这里插入图片描述
在这里插入图片描述

v-for 遍历

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事件–v-on

在这里插入图片描述
methods:加s的
在这里插入图片描述
在这里插入图片描述

vue7个常用属性

在这里插入图片描述

v-model:双向绑定

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

template:组件

在这里插入图片描述
在这里插入图片描述

axios:通信

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

计算属性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

插槽slot

在这里插入图片描述

删除splice

加粗样式

自定义事件(不懂)

在这里插入图片描述
在这里插入图片描述

vue入门小结

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

安装node.js

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

第一个vue-cli应用

在这里插入图片描述
在这里插入图片描述

安装webpack

在这里插入图片描述
在这里插入图片描述

使用webpack

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

vue-router路由

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运行

在这里插入图片描述

在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

vue+elementui

在这里插入图片描述

在这里插入图片描述

今天的文章前端 -> Vue.js 教程分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/29426.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注