vue.js.2x 脚手架

vue2过滤器,通过管道符进行调用 | 对于vue3已经废用

<-- html部分 -->
<p>{{txt | fn}}</p>

//定义过滤器处理程序
filters:{
	//限制字符长度为3  并且首字母大写
	fn(str):{
		return str.charAt(0).toUpperCase() + str.slice(1,3)
	}
}

vue cli (提供项目交互式的脚手架)

基于webpack
全局安装脚手架 npm install -g @vue/cli@4.5.15
创建项目 vue create 项目名称
配置项目内容
进入项目目录 运行npm run server

vue应用的配置选项

• data
  这里定义的数据才是应用里数据:当前应用里需要用的数据都在这里定义好
• methods
  计算方法:处理复杂的逻辑
  普通函数里面的this指向vue
  箭头函数指向window
• computed
  计算属性:求值运算
  必须有return
  使用时直接使用名称,不要加()
  get() 获取值 项目开始时自动触发
  set() 设置值 一般不用
• watch 检测数据变化做出相应处理
  
  vue项目模块化

        // 创建1个组件   (全局组件)
        Vue.component("my-content", { //  
            // 组件中的data必须是函数
            data(){
                return {
                    // 这里是当前组件的数据
                    count: 0,
                    title: "内容组件"
                }
            },
            // 当前组件的模板结构: vue2只支持1个根元素    vue3支持多个
            template: `
                <div>
                    <p>---{{count}}---</p>
                    <button @click='count++'>点击修改组件的count</button>
                </div>
            `
        });

这样在body内就可以直接使用<my-content></my-content>标签一键调用

props 方便使用者为组件提供需要展示的数据

    <div id="app">
        <p>父组件的title: {{title}}</p>
        <button @click="handleClick">点击</button>
        <!-- 使用子组件 -->
        <!-- <blog title="丸子"  tag="一个向往摸鱼生活的程序媛"></blog> -->
        <blog :title="title"  :tag="tag" :age="age" :obj="obj" ></blog>
    </div>
    <script>
        Vue.component("blog",{
            props: ["title", "tag", "age", "obj"], //声明要接收的数据, 数据名与组件标签上的属性名要对应
            data(){
                return {
                    // title: "朱雀"
                }
            },
            // 在组件模板中使用 传过来的数据prop
            template: `
                <div>
                    <h2>title: {{title}}</h2>    
                    <p>{{tag}}</p>
                    <p>{{age}}</p>
                    <p>{{obj}}</p>
                </div>
            `,
            methods:{
                // handleClick(){
                //     this.title = "朱雀"
                // }
            }
        })
        const vm = new Vue({
            el: '#app',
            data: {
                // 父组件内部的数据
                title: "丸子",
                tag: "一个向往摸鱼生活的程序媛!",
                age: 14,
                obj:{
                    a: 10,
                    b: 20
                }
            },
            methods:{
                handleClick(){
                    this.title = "朱雀"
                }
            }
        })
        /* 
            props父传子：在子组件内定义props选项, 接收父组件传过来的数据

        */
    </script>

$emit() 接受事件的处理程序
在传入数据里面定义的事件都会被转化为小写 html里面用短横杠
vue里面的template里用驼峰命名法

$event 传入的事件对象
$event.target 绑定事件对象的元素

子组件的$event的第二个参数会被父组件的$event接收到
可以通过这种方法修改父组建的值
子组件没有权限修改父组件数据