初始vue

1.创建vue项目

     已安装16.0 或更高版本的Node.js

      在你准备创建的工程目录下运行

npm init vue@latest

 

 就会自动下载,下载安装可能需要时间.下载好以后你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示:

 如果不确定是否要开启某个功能，你可以直接按下回车键选择 No

在项目被创建后，通过以下步骤安装依赖并启动开发服务器:

 cd <你的项目工程名字>
 npm install
 npm run dev

 现在就可以运行了.

2.学习vue基础

2.1数据绑定中差值表达式

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ obj.name }}</h2>
    <!-- 差值表达式可以用三目运算符进行判断 -->
    <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>
  </div>
</template>

<script>
export default {
  data() { // 格式固定, 定义vue数据之处
    return {  // key相当于变量名
      msg: "hello, vue",
      obj: {
        name: "张三",
        age: 5
      }
    }
  }
}
</script>

<style>
</style>

2.2条件渲染：

<template>
<div id="app">
  <p v-if="showMessage">This message is shown conditionally.</p>
</div>
</template>
<script>
export default {
  el: '#app',
  data: {
    <!-- 当showMessage为true时,才显示p标签的内容 -->
    showMessage: true
  }
}
</script>

2.3列表渲染

<template>
<div id="app">
  <ul>
    <!-- v-for会遍历items并且没事找到一个数据都会创建li标签 -->
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>
</template>
<script>
export default {
  el: '#app',
  data: {
   items: ['Item 1', 'Item 2', 'Item 3']
  }
}
</script>

2.4计算属性

<template>
<div id="app">
  <input v-model="firstName" type="text" placeholder="First Name">
  <input v-model="lastName" type="text" placeholder="Last Name">
  <p>Full Name: {{ fullName }}</p>
</div>
</template>
<script>
export default {
  el: '#app',
  data: {
    firstName: '',
    lastName: ''
  },
  computed: {
    <!-- 会根据输入的姓和名生成一个新的名字 -->
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

2.5事件处理：

<template>
<div id="app">
   <button v-on:click="increaseCounter">Click me</button>
  <p>Counter: {{ counter }}</p>
</div>
</template>
<script>
export default {
  el: '#app',
  data: {
    counter: 0
  },
  
  methods: {
<!-- 定义了一个方法并绑定了按钮,当点击按钮以一次就会进行counter+1 -->
    increaseCounter: function() {
      this.counter++;
    }
  }
}
</script>

3.总结

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它具有以下特点和用途：

1. 用途：

   • 构建交互式的单页面应用程序（SPA）。
   • 开发可复用的组件，实现模块化的前端开发。
   • 实现响应式的数据绑定，使数据和UI保持同步。
   • 处理复杂的视图逻辑和交互行为。

2. 核心概念：

   • 数据绑定：Vue.js通过双向数据绑定实现了数据和UI元素之间的自动同步。
   • 组件化开发：Vue.js鼓励将UI划分为可复用的组件，组件之间通过props和events进行通信。
   • 响应式：Vue.js使用响应式系统追踪数据的变化，并自动更新相关的UI。
   • 模板语法：Vue.js使用简洁的模板语法，结合指令和表达式，实现动态的HTML渲染。

总之，学习Vue.js需要掌握其核心概念和基础特性，理解组件化开发和响应式系统的工作原理。同时，通过实践项目和阅读官方文档，深入了解Vue.js的高级特性和最佳实践。不断练习和探索，可以逐渐掌握Vue.js，并应用于构建现代化的Web应用程序。