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

梦里梦外; 2023-09-30 09:57 6阅读 0赞

SDU项目实训2019级

继续vue框架的学习~

#### vue表单 ####

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

input，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 为配置选项。注册后，我们可以使用以下方式来调用组件：

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

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过渡&动画 ####

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

#### 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);
      });

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_19_color_FFFFFF_t_70_g_se_x_16][]

例如：

// 发送 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: {}
    }

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b3513dd5e2654337b7d09a95b12820e2.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5p2O5bCP5oGp5oGp5a2Q,size_19,color_FFFFFF,t_70,g_se,x_16