【1】Vue

最新推荐文章于 2023-02-20 15:53:53 发布

陈赖宁

最新推荐文章于 2023-02-20 15:53:53 发布

阅读量237

点赞数

文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/chenlaining/article/details/124477190

版权

本文介绍了Vue.js的基础知识，包括如何创建Vue实例、Vue模板、数据绑定、事件处理、计算属性和监听属性。讲解了Vue实例与容器的对应关系，插值语法与指令的使用，以及数据代理和MVVM模型。同时，讨论了事件修饰符、键盘事件、条件渲染、列表渲染的关键点，并总结了Vue的数据监测机制和表单数据收集。

摘要由CSDN通过智能技术生成

1.初始vue

（1）想让Vue工作，必须创建一个Vue实例，还要传入一个配置对象

（2）root容器里的代码依旧为html代码，只是加入一些Vue语法

（3）root容器里的代码被称为【Vue模板】

（4）vue实例和容器时一一对应的

（5）真实开发中只有一个vue实例，并且配合组件一起使用

（6）{ {xxxx}}中的xxx为js表达式，且xxx可以自动读取data中的所有属性

js表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方

js语句：if语句，for语句，只是控制代码走向不产生值

（7）一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 插值语法 {
  {}} -->
        <h1>hello,{
  {name}}</h1>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue在启动时生成生产提示

        const x = new Vue({
            el: "#root",//el用于当前vue实例为哪个容器 一般用id选择器
            data: { //data存储数据，数据供el所指定的容器所使用
                name: '尚硅谷',
                age:'18'

            },

        })
    </script>
</body>

</html>

2.vue模板语法有2大类

（1）插值语法：

功能：用于解析标签体内容

写法：{ {xxx}}，xxx为js表达式，且可以直接读取到data中所有属性

（2）指令语法：

功能：用于解析标签（标签体内容、标签属性、绑定事件）

举例：v-bind:href="xxx" 或简写 :href="xxx" ， xxx同样是js表达式

<div id="root">
        <!-- 插值语法 使用于 标签体部分 -->
        <h1>插值语法</h1>
        <h3>你好，{
  {name}}</h3>
        <hr>
        <!-- 指令语法 应用于标签属性 -->
        <h1>指令语法</h1>
        <!-- v-bind 表示绑定（可以简写成：） 读取url变量给href  引号里面的 为变量-->
        <a v-bind:href="school.url">11</a>
        <!-- <a href="#"></a>为原版 只是把#变换成 url变量 前面加上v-bind 绑定 或简写 ： -->

        <a :href="school.url">我的学校名字:{
  {school.name}}</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
        new Vue({
            el: "#root",
            data: {
                name: '尚硅谷',
                school: {
                    url: 'http://www.baidu.com',
                    name: '宁波'
                }
            }
        })
    </script>

3.数据绑定：（共两种）

（1）.单向数据绑定：v-bind 只能从data流向页面

（2）.双向数据绑定：v-model 数据不仅能从data流向页面，还可以从页面流向data

双向绑定一般应用于表单类元素上（input、select等）

v-model：value 可以简写为 v-model，默认收集的加上value值

<body>
    <div id="root">
        <!-- v-bind:为单向数据绑定 只能改后台的值 -->
        单向数据绑定:<input type="text" v-bind:value="name"><br>
        <!-- v-model:为双向数据绑定 修改浏览器的值 后台数据也能发生改变 -->
        <!-- v-model 只能用于于表单类元素（输入类元素）都具有value值  -->
        双向数据绑定:<input type="text" v-model:value="name">

  <!-- 简写 -->
        单向数据绑定:<input type="text" :value="name"><br>
        双向数据绑定:<input type="text" v-model:="name">


    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name:'cxw'

            }
        })
    </script>
</body>

4.el与data的两种写法

（1）el的2种写法

①.new Vue 的时候直接配置el属性

②先创建vue实例，随后通过vm.$mount（'#root'）指定el的值

  //   el 第一种写法
      new Vue({ 
          el: '#root',
          data:{
              name:'aa'
          }
      })
      
    //   el 第二种写法
      const v = new Vue({
          data:{
              name:'aa'
          }
      })
      console.log(v)
      v.$mount('#root') //挂载

（2）data的2种写法（里面都是属性）

① 对象式

②函数式（到后期学习组件的时候，data必须使用函数式）

备注：由Vue管理的函数，一定不能写箭头函数，一旦写了箭头函数，this则不再式Vue实例

  //   data d二种写法

        // data 第一种写法：对象式
        new Vue({
            el: '#root',
            data: {
                name: 'aa'
            }
        })
        //     data 第二种写法：函数式
        new Vue({