Vue核心基础（一）

初始vue

• vue框架
  框架:
  1.做项目 类似 盖房子
  2.使用html css javascript实现相当于最原始方法盖房子 使用框架后相当于使用钢筋混泥土实现 Vue使用一定不会比原生开发复杂 使用简单 原理复杂

• vue学习 使用vue框架技术操作html标签元素，操作内容，样式，属性，事件

第一个vue程序

<script src="../lib/vue.global.js"></script>
<script>
    // 创建vue实例对象
    const app = Vue.createApp({
        // data选项 定义数据 
        // 为什么data定义为函数形式：  保证一个vue实例对应一个数据对象 (组件时深入) 
     	data() {
            return {
                message: '初始vue程序',
                title:'vue学习'
            }
     	},
        methods:{
            plus() {
                this->选项对象
            },
            minus() {

            }
        }
    })
    app.mount("#app") //mount方法 让vue实例与html元素关联 
</script>

vue基础

指令: v-开头的特殊属性

1. 操作内容
   {{变量}} v-html v-text v-pre

2. 操作属性
   v-bind:属性名="属性值"
   v-bind:href="url"
   简写 :src='url'

3. 操作样式
   v-bind:属性名="属性值"
   简写 :属性名="属性值"
   
   :属性名="字符串"
   :属性名="{对象}"
   :属性名="[数组]"

4. 操作事件
   v-on:事件类型=vue事件处理方法
   v-on:click="plus"
   简写@click="plus"

5. this关键字 选项对象，操作data选项中数据和methods方法

6. 小示例 计数加一减一

    <div id="app">
        <p>{{count}}</p>
        <button @click="plus">加一</button>
        <button @click="minus">减一</button>
    </div>

    <script src="../lib/vue.global.js"></script>
    <script>
        const {createApp} = Vue
        const app =  createApp({
            data() {
                return {
                    count: 0,
                };
            },
            methods:{
                //加一
                plus(){
                    this.count++
                    //不用刷新
                },
                //减一
                minus(){
                    this.count--
                }
            }
        })
        app.mount('#app')
    </script>

响应式原理

• Object.propropery()
• Proxy 代理

指令

• 双向数据绑定 v-model
• 条件 v-if 、v-else 、 v-else-if
• 显示 v-show = display:none | block
• 循环 v-for

示例todo-list

    <div id="app">
        <input type="text" placeholder="请输入内容" v-model="inputValue">
        <button @click="onConfirm">确定</button>
        <ul>
            <li v-for="(item,index) in list" style="list-style: none;">
                <input type="checkbox" v-model="item.state" style="cursor: pointer;">
                {{ item.name }}
                <span @click="onDel(index)" style="margin: 0 20px;color: #888;cursor: pointer;"> X </span>
                <span @click="onChecked(index)" style="padding: 0 6px;border-radius: 6px; border: 1px solid #666;cursor: pointer;"> {{item.state?'选中':'未选中'}} </span>
            </li>
        </ul>
    </div>

    <script src="../../lib/vue.global.js"></script>
    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    inputValue: '',
                    list: [
                        {name: 'css', state: false},
                    ],
                }
            },
            methods: {
                onConfirm() {
                    let obj = {
                        name: this.inputValue,
                        state: false
                    }
                    this.list.push(obj)
                    this.clearInput()
                },
                //清空输入框
                clearInput() {
                    this.inputValue = ''
                },
                //删除
                onDel(index) {
                    this.list.splice(index, 1)
                },
                //选中状态
                onChecked(index) {
                    let item = this.list[index]
                    item.state = !item.state
                }
            },
        }).mount('#app')
    </script>