Vue 成长之旅 | Vue基础用法一

一、Vue 基础使用

<body>
  <div id="app">
      <p v-text="username"></p>
 </div>
</body>
 <script src="./vue.js"></script>
<script>
// 引用vue js框架后， 浏览器加载完毕vue 框架，window全局就有了一个Vue的构造函数
// 创建Vue 实例对象
const vm = new Vue({
    // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
    el: '#app',
    data: {
        username: '张三'
    }
})
</script>

二、 Vue的指令与过滤器

1、指令的概念

指令：是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

Vue中的指令按照不同的用途可以分为如下6大类：

1）、内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容，常用的内容渲染指令有如下3个：

1》 v-text;

// v-text 代表把变量值渲染到 标签的内容区域（会覆盖标签内部内容）
<div id="app" v-text="username"></div>
//  会覆盖p标签原有内容
<p v-text="gender">性别</p>

2》{{ }} 插值表达式
Vue 提供的{{ }} 表达式，只是内容的占位符，不回覆盖原有内容。

// 只替换占位符的内容
<p>性别：{{ gender }}</p>

// 插值表达式，也支持javascript表达式的运算。
 {{ flag ? "YES":"NO"}}

3》v-html
可以把带有标签的字符串，渲染成真正的 html

data: {
        username: '张三',
        gender : '女',
        info:'<div style=\'color:red\'>sssss</div>'
    }
// 会把文本内容 ， 直接显示成文本， 而不认识html标签
<p v-text="info"></p>
// 会识别html 标签，并识别
<p v-html="info"></p>

2）、属性绑定指令

插值表达式只能用于内容节点中， 不能用于属性节点中。
如果要给某个属性，动态绑定值，可用 v-bind 指令，直接在某个属性前面加v-bind: 即可。同时这个指令可以简写成 “:”
// 这两种写法都可以
<input v-bind:placeholder="tip"/>
<input :placeholder="tip"/>

属性表达式里面， 也支持简单的表达式运算
// 在data 中定义了 index变量，如果告诉vue ， 要查找一个叫 index的变量
// 如果在属性绑定指令中，运用表达式，则把固定的字符串用单引号括起来，然后用 + 拼接变量即可 。 实例如下： 
<div :id="'id_'+index" :title="'id_'+index">aaaa</div>

3）、事件绑定指令

要想绑定事件，先在Vue构造函数中，添加: methods 属性，并在methods 对象中添加方法

const vm = new Vue({
    // el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
    el: '#app',
    data: { count : 1 }
    methods:{
        // 这里可以使用简写的方式，去掉 :function 即可
        myclick :function(n) {
            // 这里vm ，可以使用this 替代，即：this.count += n
            vm.count += n
        },
        myclick1 (n,e) {
            this.count += n
            if(this.count % 2 == 0){
                e.target.style = "background:red"
            }else{
                e.target.style = "background:yellow"
            }
            console.log("================",e)
        }
    }
})

// 然后在元素中 click 属性绑定这个方法，也可以简写方式：
<button v-on:click="myclick(3)">click</button>
// 简写
<button @click="myclick(3)">click</button>

<!--vue 提供了一个内置对象：$event , 代表的就是原生事件对象 , 如果不传自定义参数，自带了原生事件对象-->
<button @click="myclick1(1, $event)">click</button>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
event.preventDefault() 这个是停止默认事件处理流程

//  阻止单击事件继续传播 
<a v-on:click.stop="doThis"></a>
// 提交事件不再重载页面 ，
<form v-on:submit.prevent="onSubmit"></form>

4）、双向绑定指令

示例

<p>用户名：{{ username }}</p>
// 通过v-model 指令进行双向绑定 ， v-model 在底层监听的就是value属性
<input v-model="username" />
// 通过v-bind 属性绑定， 也可以显示数据，但是当input内容变化时，变量不会变化
<input :value="username"/>
// 通常情况下，可以用 v-model 替换 v-bind:value

v-model 修饰符

v-model.number

<input type="text" v-model.number="n1"/> +  <input type="text" v-model="n2"/> = <span>{{n1 + n2}}</span>
// 如果不做限制，input 可以输入任意字符串，有时候我们只允许用户输入数字，那么就可以修饰符的方式控制。

v-model.trim

<input type="text" v-model.trim="username"/>
// 用户在输入框 中字符串前后输入空格，会被自动清理

v-model.lazy

<input type="text" v-model.lazy="username"/>
// 默认情况下，输入框的内容变化会实时同步到变量中，但有时候，我们只需要在输入框失去焦点的时候，才去监听内容。

5）、条件渲染指令

v-if

如果条件是true ，就加载元素，否则就不会解析加载元素

v-show

如果条件是true，浏览器也会解析元素，但是会把元素隐藏

6）、列表渲染指令

v-for

基础使用，在想要循环生成的元素标签上加上 v-for 指令即可

list:[
        {id:1,name :'张三'},
        {id:2,name :'李四'},
        {id:3,name :'王五'},
    ]
...
<li v-for="item in list">
    {{item.name}}
 </li>
// 添加一个列表索引 ， 用到了索引 index ， 就要添加一个:key 属性绑定，并绑定索引 ， 且:key 的值只能是 数字或者字符串，且值不能重复
<li v-for="(item,idx) in list" :title="'id_'+item.name + '_' +idx"  :key="idx">
    {{item.name}}
</li>

key的注意事项

key的值只能是字符串或数字类型
key的值必须具有唯一性
建议把属性的id属性的值作为key的值
建议使用v-for指令时，一定要指定key的值
使用index的值当作key的值没有任何意义

2、过滤器

需要注意的点

过滤器在Vue3.x中已经被作废，
过滤器只用于插值表达式和 v-bind 属性绑定指令中
过滤器由管道符进行调用
过滤器函数必须有返回值，最后显示的是过滤器函数的返回值
在过滤器的第一个形参就能拿到实际参数
过滤器函数，必须声明在 filters 属性中（与data、methods 同级）

三、侦听器

侦听变量变化

1、函数格式的侦听器

<div id="app">
  <input type="text" v-model="username">
</div>
const vm = new Vue({
    el: '#app',
    data: {
        username: '张三',
    },
    // 所有的侦听器 ， 都要定义在watch 属性节点下面
    watch :{
        // 本质上是一个函数， 要侦听哪个变量，就用这个变量作为方法的名称
        username(newVal , oldVal){
            console.log("=============newVal  ---oldVal", newVal, oldVal)
        }
    }
})

缺点：

1、进入页面不会自动触发侦听器
2、如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器

2、属性格式侦听器

<div id="app">
  <input type="text" v-model="info.username">
</div>
const vm = new Vue({
    el: '#app',
    data: {
        info:{
            username: '张三',
        }
    },
    // 所有的侦听器 ， 都要定义在watch 属性节点下面
    watch :{
        username:{
            // 里面的方法名称必须是 handler ， 否则报错
            handler(newVal , oldVal){
                console.log("=====newVal  ---oldVal", newVal, oldVal)
            },
            //  immediate 默认值是false ， 作用是：控制侦听器是否立即执行
            immediate : true   ,
            // deep 默认值是 false , 开启深度侦听 ， 只要对象中的任何属性发生变化，就会触发
            deep:true
        }

        // 侦听对象中的某个属性，需要用单引号括起来，这样只会侦听指定的属性
        'info.username':{
            handler(newVal , oldVal){
                console.log("==========newVal , oldVal" , newVal , oldVal)
            },
        }
    }
})

好处：

1、可以通过immediate 控制，是否立即侦听
2、可以通过deep 控制，是否要深度侦听
3、可以侦听对象中的某个具体属性的变化

三、计算属性

通过一些列运算后，得到一个属性值，这个计算得到的属性值，可以在模板结构或methods 方法中使用

const vm = new Vue({
    el: '#app',
    data: {
        r: 0,
        g: 0,
        b: 0,
    },
    // 所有的计算属性都要放在 computed 节点中
    computed: {
        // 计算属性要写成函数的形式
        rgb() {
            return `rgb(${this.r},${this.g},${this.b})`
        }
    }
})
// 通过打印vm 对象， 可以发现vm多了一个 rgb 的属性
console.log("=====", vm)

计算属性与侦听器的区别

1、computed 是同步的， watch 可以实现异步
2、computed 必须有返回值， watch 里面的函数可以不写返回值
3、同时侦听多个属性变量时，尽量用计算属性