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

SDU项目实训2019级

继续vue框架的学习~

vue表单

v-model 会根据控件类型自动选取正确的方法来更新元素。双向数据绑定。

input，textarea。。

<input v-model="message1" placeholder="输入">

<textarea v-model="message2" placeholder="多行文本输入"></textarea>

若是复选框，如果是一个为逻辑值，如果是多个则绑定到同一个数组：

 <p>多个复选框：</p>
  <input type="checkbox" id="baidu" value="Baidu" v-model="checkedNames">
  <label for="baidu">Baidu</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="firefox" value="Firefox" v-model="checkedNames">
  <label for="firefox">Firefox</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>

若为单选框，type = "radio" 和 v-model = "picked"

若为select列表：

<select v-model="selected" name="site">
    <option value="">选择一个网站</option>
    <option value="www.baidu.com">Baidu</option>
    <option value="www.google.com">Google</option>
  </select>

如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 .number 给 v-model 来处理输入值。

vue组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

注册一个全局组件：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName>

所有实例都可以使用全局组件。我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用。

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

Vue.js路由

首先先cnpm install vue-router

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。

<router-link> 的属性：

to表示目标路由的链接。

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

vue.js过渡&动画

<transition name = "nameoftransition">
   <div></div>
</transition>

（不是很重要，之后要用到的时候再学习）

vue.js Ajax

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装：cnpm install axios

使用：①GET方法：使用response.data来读取json数据

②POST方法：格式如下

axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

 例如：

// 发送 POST 请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

创建请求时可用的配置选项，注意只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。

axios请求的响应包含以下信息：

{
  // `data` 由服务器提供的响应
  data: {},

  // `status`  HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: "OK",

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}