Vue.js入门及技术指南

阳光穿透心脏的1/2处 2023-07-03 03:22 3阅读 0赞

# 初识Vue.js #

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

本人认为，Vue是一个前端框架，有自己的模板语法，我们知道，传统的视图层是使用后端的模板标签来实现前端的展现逻辑，而Vue是有自己的模板语法，可以不依赖于后端来展现在前端页面，它有自己的模板语法、还有计算函数、事件监听处理、表单处理、路由、其他组件等。这也要求使用该框架开发人员需要更多的编程经验，原本传统开发前端人员对编程不太熟悉，不过这对于前后端分离开发是一种不错的方案。

> 参考地址：[https://www.runoob.com/vue2/vue-tutorial.html][https_www.runoob.com_vue2_vue-tutorial.html]

# 安装 #

下载地址：[https://vuejs.org/js/vue.min.js][https_vuejs.org_js_vue.min.js]

## 示例应用 ##

目录结构

![20200201162746305.png][]

文件test\_vue.html代码如下：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - </title>
    <script src="vue.min.js"></script>
    </head>
    <body>
    <div id="app">
      <p>{
       { message }}</p>
    </div>
    
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      }
    })
    </script>
    </body>
    </html>

运行结果：

![20200201162839181.png][]

## vue语法注意点 ##

*  点击事件使用 @click，如：<input type="button" class="btn " value="搜索"  @click='to\_sele'>
 *  页面显示值需要使用\{ \{ \}\} ，如：<td>\{ \{item.name\}\}</td>
 *  输入值使用:value，如：<input type="radio" name="rd\_sele" :value="item.id">。如果使用\{ \{item.id\}\}，则会解析不出来

[https_www.runoob.com_vue2_vue-tutorial.html]: https://www.runoob.com/vue2/vue-tutorial.html
[https_vuejs.org_js_vue.min.js]: https://vuejs.org/js/vue.min.js
[20200201162746305.png]: https://img-blog.csdnimg.cn/20200201162746305.png
[20200201162839181.png]: https://img-blog.csdnimg.cn/20200201162839181.png