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

SDU项目实训2019级

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

项目结构

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

其中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) 挺好懂的。

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>

 

 条件语句

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

循环语句

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

监听属性

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

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

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

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