技术笔记

编程 营销 外贸


Vue.js 是什么?

<h2><strong>一、Vue.js 是什么?</strong></h2> <p>Vue.js 是一个<strong>渐进式 JavaScript 框架</strong>,用于构建用户界面(UI)。它的核心特点:</p> <ul> <li> <p><strong>响应式数据绑定</strong>:数据变化自动更新视图。</p> </li> <li> <p><strong>组件化开发</strong>:通过可复用的组件构建复杂应用。</p> </li> <li> <p><strong>轻量灵活</strong>:可逐步集成到现有项目或独立开发单页应用(SPA)。</p> </li> <li> <p><strong>易上手</strong>:模板语法接近原生 HTML,学习曲线平缓。</p> </li> <li> <ul> <li>*</li> </ul> </li> </ul> <h2><strong>二、Vue.js 与 React/jQuery 的对比</strong></h2> <h3><strong>1. 共同点</strong></h3> <table> <thead> <tr> <th>特性</th> <th>Vue.js</th> <th>React.js</th> <th>jQuery</th> </tr> </thead> <tbody> <tr> <td><strong>操作 DOM</strong></td> <td>支持(虚拟 DOM)</td> <td>支持(虚拟 DOM)</td> <td>直接操作 DOM</td> </tr> <tr> <td><strong>组件化</strong></td> <td>核心功能</td> <td>核心功能</td> <td>需手动实现</td> </tr> <tr> <td><strong>社区生态</strong></td> <td>丰富(Vue Router、Vuex)</td> <td>庞大(React Router、Redux)</td> <td>插件生态(如UI组件库)</td> </tr> </tbody> </table> <h3><strong>2. 核心差异</strong></h3> <table> <thead> <tr> <th><strong>维度</strong></th> <th>Vue.js</th> <th>React.js</th> <th>jQuery</th> </tr> </thead> <tbody> <tr> <td><strong>设计理念</strong></td> <td>渐进式框架,强调简单集成</td> <td>声明式UI库,专注视图层</td> <td>DOM操作工具库</td> </tr> <tr> <td><strong>语法</strong></td> <td>模板语法(类似 HTML + 指令)</td> <td>JSX(JavaScript + XML 混合语法)</td> <td>链式调用(如 <code>$(&amp;#039;div&amp;#039;).hide()</code>)</td> </tr> <tr> <td><strong>数据绑定</strong></td> <td>双向绑定(<code>v-model</code>)</td> <td>单向数据流(Props + State)</td> <td>手动操作</td> </tr> <tr> <td><strong>状态管理</strong></td> <td>Vuex(官方方案)</td> <td>Redux/MobX(第三方)</td> <td>无</td> </tr> <tr> <td><strong>学习成本</strong></td> <td>低(文档友好,语法直观)</td> <td>中(需掌握 JSX 和函数式概念)</td> <td>低(但需熟悉 DOM API)</td> </tr> <tr> <td><strong>适用场景</strong></td> <td>快速开发中小型应用</td> <td>复杂企业级应用</td> <td>简单交互或旧项目维护</td> </tr> </tbody> </table> <hr /> <h2><strong>三、Vue.js 快速上手</strong></h2> <h3><strong>1. 安装与初始化</strong></h3> <h4>方式一:CDN 引入(适合快速原型开发)</h4> <p>html</p> <p>复制</p> <p>&lt;script src\=&quot;<a href="https://unpkg.com/vue@3/dist/vue.global.js&quot;\&gt;&lt;/script\&gt">https://unpkg.com/vue@3/dist/vue.global.js&quot;\&gt;&lt;/script\&gt</a>;</p> <p>运行 HTML</p> <h4>方式二:脚手架创建项目(推荐正式开发)</h4> <p>bash</p> <p>复制</p> <pre><code>npm install \-g @vue/cli vue create my-project cd my-project npm run serve</code></pre> <h3><strong>2. 核心概念与示例</strong></h3> <h4>(1) 模板语法与响应式数据</h4> <p>html</p> <p>复制</p> <pre><code>&amp;lt;div id\=&amp;quot;app&amp;quot;\&amp;gt; &amp;lt;p\&amp;gt;{{ message }}&amp;lt;/p\&amp;gt; &amp;lt;button @click\=&amp;quot;reverseMessage&amp;quot;\&amp;gt;反转文本&amp;lt;/button\&amp;gt; &amp;lt;/div\&amp;gt; &amp;lt;script\&amp;gt; const app = Vue.createApp({ data() { return { message: &amp;#039;Hello Vue!&amp;#039; } }, methods: { reverseMessage() { this.message = this.message.split(&amp;#039;&amp;#039;).reverse().join(&amp;#039;&amp;#039;); } } }); app.mount(&amp;#039;#app&amp;#039;); &amp;lt;/script\&amp;gt;</code></pre> <p>运行 HTML</p> <h4>(2) 指令系统</h4> <table> <thead> <tr> <th>指令</th> <th>作用</th> <th>示例</th> </tr> </thead> <tbody> <tr> <td><code>v-bind</code></td> <td>动态绑定属性</td> <td><code>&amp;lt;div :class=&amp;quot;className&amp;quot;&amp;gt;</code></td> </tr> <tr> <td><code>v-if</code> / <code>v-show</code></td> <td>条件渲染</td> <td><code>&amp;lt;p v-if=&amp;quot;isVisible&amp;quot;&amp;gt;显示&amp;lt;/p&amp;gt;</code></td> </tr> <tr> <td><code>v-for</code></td> <td>列表渲染</td> <td><code>&amp;lt;li v-for=&amp;quot;item in items&amp;quot;&amp;gt;{{ item }}&amp;lt;/li&amp;gt;</code></td> </tr> <tr> <td><code>v-model</code></td> <td>表单双向绑定</td> <td><code>&amp;lt;input v-model=&amp;quot;username&amp;quot;&amp;gt;</code></td> </tr> </tbody> </table> <h4>(3) 组件化开发</h4> <p>javascript</p> <p>复制</p> <pre><code>// 定义组件 const TodoItem \= { props: \[&amp;#039;todo&amp;#039;\], template: \`&amp;lt;li&amp;gt;{{ todo.text }}&amp;lt;/li&amp;gt;\` }; // 根组件中使用 Vue.createApp({ components: { TodoItem }, data() { return { todos: \[{ id: 1, text: &amp;#039;学习 Vue&amp;#039; }\] } } }).mount(&amp;#039;#app&amp;#039;);</code></pre> <hr /> <h2><strong>四、Vue.js 生态工具</strong></h2> <table> <thead> <tr> <th>工具</th> <th>用途</th> </tr> </thead> <tbody> <tr> <td><strong>Vue Router</strong></td> <td>官方路由管理(SPA开发必备)</td> </tr> <tr> <td><strong>Vuex</strong></td> <td>全局状态管理(替代 Redux)</td> </tr> <tr> <td><strong>Vite</strong></td> <td>极速构建工具(替代 Webpack)</td> </tr> <tr> <td><strong>Pinia</strong></td> <td>新一代轻量状态管理库(推荐)</td> </tr> </tbody> </table> <hr /> <h2><strong>五、学习资源推荐</strong></h2> <ol> <li> <p><strong>官方文档</strong>:<a href="https://vuejs.org/"><a href="https://vuejs.org">https://vuejs.org</a></a>(中文版:<a href="https://cn.vuejs.org/"><a href="https://cn.vuejs.org">https://cn.vuejs.org</a></a>)</p> </li> <li> <p><strong>实战教程</strong>:</p> <ul> <li> <p>Vue 3 + TypeScript 全栈项目(推荐 <a href="https://www.vuemastery.com/">Vue Mastery</a>)</p> </li> <li>官方示例库:<a href="https://github.com/vuejs/examples"><a href="https://github.com/vuejs/examples">https://github.com/vuejs/examples</a></a></li> </ul> </li> <li><strong>调试工具</strong>:安装浏览器插件 <a href="https://devtools.vuejs.org/">Vue Devtools</a></li> </ol> <hr /> <h2><strong>六、何时选择 Vue.js?</strong></h2> <ul> <li> <p>需要快速开发且团队经验较浅时(语法更直观)</p> </li> <li> <p>项目需渐进式增强(可从局部功能逐步迁移)</p> </li> <li>偏好 &quot;约定优于配置&quot; 的开发模式</li> </ul> <p>若项目已深度使用 React 或需要复杂状态管理,可继续沿用现有技术栈。<br /> <strong>jQuery 仅建议在维护旧项目或简单 DOM 操作时使用</strong>。</p> <p>掌握 Vue.js 后,可轻松开发企业级应用(如后台管理系统、数据看板等)🚀</p> <h3>VUE学习手册</h3> <p><code>https://cn.vuejs.org/guide/essentials/list.html</code></p>

页面列表

ITEM_HTML