【SDU项目实训2019级】学习过程记录——vue框架1

ゞ浴缸里的玫瑰 2023-09-30 09:56 5阅读 0赞

SDU项目实训2019级

本次项目实训在整个项目中负责的是前端的设计和编写，以前写bs架构的项目的时候并没有使用过vue框架，在本次项目中前端使用vue，记录学习和编写过程。

#### 项目结构 ####

首先我是安装了npm的淘宝镜像以及其命令cnpm，然后搭建一个项目并查看其vue目录的结构：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_15_color_FFFFFF_t_70_g_se_x_16][]

其中node\_modules是npm加载的项目依赖模块，src目录里面：assets中放一些图片比如logo等等，components里面放了一个组件文件，可以不使用它，App.vue是项目的入口文件，我们可以直接将组件写在这里而不使用components文件目录，main.js是项目的核心文件。

然后package.json是项目配置文件，.gitignore是项目git配置，README.md是项目的说明文档。

#### vue构造器 ####

在vue构造器中：

①有一个el 参数，它是 DOM 元素中的 id

②data 用于定义属性

③methods 用于定义的函数，可以通过 return 来返回函数值

④\{ \{ \}\} 用于输出对象属性和函数返回值

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

#### 数据绑定 ####

1.数据绑定最常用的方式就是使用\{ \{...\}\}双大括号的文本插值：

<div id="app">
      <p>{
       { message }}</p>
    </div>

还可以在使用v-html指令用来输出html代码，html属性中的值应该要用v-bind指令，这里可以看这个例子：[菜鸟教程在线编辑器 (runoob.com)][_runoob.com] 挺好懂的。

vue.js提供了完全的JavaScript支持，然后在用户输入时，在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定。

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<div id="app">
        <p>{
       { message }}</p>
        <button v-on:click="reverseMessage">反转字符串</button>
    </div>
        
    <script>
    new Vue({
      el: '#app',
      data: {
        message: 'abcdefg!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    </script>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_19_color_FFFFFF_t_70_g_se_x_16][]

#### 条件语句 ####

v-if="条件"，v-else，v-else-if="条件" 指令的使用，还可以使用v-show="属性"指令

#### 循环语句 ####

v-for 指令需要以 **site in sites** 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。也可以循环整数。

#### 监听属性 ####

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。[菜鸟教程在线编辑器 (runoob.com)][_runoob.com 1]

可以使用v-on指令：click = 方法，来响应，由点 . 表示的指令后缀来调用修饰符，例如

<a v-on:click.stop="doThis"></a>

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16][]

<--按键盘的时候：submit-->
    <input v-on:keyup.enter="submit">
    
    <input @keyup.enter="submit">

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_15_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/3ac966301f4048f5b22a375dfce07dc1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q,size_15,color_FFFFFF,t_70,g_se,x_16
[_runoob.com]: https://www.runoob.com/try/try.php?filename=vue2-v-bind
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/d4c22a2e389b49d5be31a506a1719f60.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q,size_19,color_FFFFFF,t_70,g_se,x_16
[_runoob.com 1]: https://www.runoob.com/try/try.php?filename=vue2-watch
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/fc1a75d1349f4d7e8119531e94f550a0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q,size_20,color_FFFFFF,t_70,g_se,x_16