Vue学习之路

最新推荐文章于 2023-06-20 11:55:31 发布

VIP文章宁不知

最新推荐文章于 2023-06-20 11:55:31 发布

阅读量166

点赞数

分类专栏： Vue 文章标签： Vue

本文链接：https://blog.csdn.net/qq_39196997/article/details/102556166

版权

VUE.js

1.三大前端框架之一

vue.js

React

Angular

2.安装node.js

中文网站：(http://nodejs.cn/download/)

安装好node.js后，

查看node版本：在cmd命令行中输入 node -v

开始使用node：输入node +enter，即可

3.简单例子

1.{ {}}：插值表达式 ,前后可以放任意东西

2.v-text:与插值表达式效果一致，没有闪烁问题，会覆盖元素中原本的内容

两者都是将内容当做字符串直接展示

vm：vue实例对象==》 var vm=new vue({}) 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数

注意：在vm实例中，要想获取data上的数据，或者想要调用Methods的方法，必须通过

this.属性名，或者this.方法名进行访问，this指的是我们new出来的实例对象

el：指定要控制页面上的哪个区域

data：1.这里的 data 就是 MVVM中的 M，专门用来保存每个页面的数据的

2.data 属性中，存放的是 el 中要用到的数据

methods：methods属性中定义了vue实例所有可以用的方法。是个对象。

4.指令

v-html可以渲染标签

v-bind是vue中用于绑定属性的一个方式 v-bind：title，可以简写为：+属性,只能实现数据的单向绑定，M–》V

v-on：vue中提供了v-on：事件绑定机制。简写为：v-on：click ===== @click=

v-model：数据双向绑定,只能运用到表单元素中

ES6的箭头函数，可以将内部的this指向和外部this的指向保持一致。

5.修饰符

.prevent:阻止默认行为，比如a标签想要做点击事件，如果不阻止默认行为，就会跳转页面。

. capture：实现捕获事件机制。

.self：实现只有点击当前元素时，才会触发事件函数

.once：只触发一次事件函数

.self：只会让自己失效冒泡，不会阻止别人

Vue指令之`v-for`和`key`属性

1.迭代数组

<ul>
  <li v-for="(item, i) in list">索引：{
  {i}} --- 姓名：{
  {item.name}} --- 年龄：{
  {item.age}}</li>
</ul>

2.迭代对象中的属性

	<!-- 循环遍历对象身上的属性 -->

    <div v-for="(val, key, i) in userInfo">{
  {val}} --- {
  {key}} --- {
  {i}}</div>

3.迭代数字

<p v-for="i in 10">这是第 {
  {i}} 个P标签</p>

	从1开始

json-server：下载安装

postman：下载安装

Vue项目修改

1.App.vue

2.HelloWorld.vue

3.添加页面

1.创建Vue文件

在components文件夹下创建

2.修改路由文件

在route.js文件夹下的index.js文件中，导入新建的vue文件，（模块）

在routes数组中添加一个对象，仿照前面的写

（可以试着访问一下网址：http：localhost：8080/#/HelloWorld）

要想地址栏中没有这个#符号
export default new Router({ 
mode: 'history',//修改
routes: routes}
)

案例

添加功能

this.list.push：向数组中添加一个元素

Vue项目依赖

npm -install：命令行下载Vue项目的依赖，在package.json文件中是所有的依赖

下载好的依赖会保存在node-modules文件夹中

vue使用技巧

1.element-ui

https://element.eleme.cn/#/zh-CN/component/form

使用的时候直接引入

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

Hello world

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->

最低0.47元/天解锁文章

宁不知

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习之路

VUE.js1.三大前端框架之一vue.jsReactAngular2.安装node.js中文网站：(http://nodejs.cn/download/)安装好node.js后，查看node版本：在cmd命令行中输入 node -v开始使用node：输入node +enter，即可3.简单例子1.{{}}：插值表达式 ,前后可以放任意东西2.v-text:与插值表达式效果...
复制链接

扫一扫