vue 学习，解决没有idea 安装 Vue 插件没有Vue component选项-CFANZ编程社区

前端的一些相关知识：

#逻辑

1.判断
2.循环

#事件

1.浏览器事件：window document
2.Dom事件：增，删，改，遍历，修改节点元素内容
jQuery

#视图

html

css:难点 Bootstrap 可视化布局
https://www.bootcss.com/p/layoutit/

#通讯

xhr
ajax

Soc:
HTML+CSS+JS:视图：给用户看，刷新后台给的数据

网络通讯：axios
页面跳转：vue-router
状态管理：vuex
Vue-UI:ICE

ESS6  Webpack打包成ESS5  支持

在这里插入图片描述
IDEA 编写第一个vue程序
第一步
安装vue插件
第一个vue程序

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层 模板-->
<div id="app">
    {{ message }}
</div><!--导入Vue.js-->

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });


    var app2 = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 '
        }
    });
</script>
</body>
</html>

if-else 语句的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层 模板-->
<div id="app">
   <h1 v-if="type==='A'">A</h1>
   <h1 v-else-if="type==='B'">B</h1>
   <h1 v-else-if="type==='C'">C</h1>
   <h1 v-else="type==='D'">D</h1>
</div><!--导入Vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
          type:'A'
        }
    });

</script>
</body>
</html>

for循环的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view 层 模板-->
<div id="app">
   <h1 v-if="type==='A'">A</h1>
   <h1 v-else-if="type==='B'">B</h1>
   <h1 v-else-if="type==='C'">C</h1>
   <h1 v-else="type==='D'">D</h1>
</div><!--导入Vue.js-->

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
          type:'A'
        }
    });

</script>
</body>
</html>

vue 组件
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <!--组件：传递给组件参中的参数：props-->
<sophy v-for="item in items" v-bind:soh="item"></sophy>
</div>


<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    Vue.component("sophy",{
        props:['soh'],
        template:'<li>{{soh}}</li>'
    })

    var vm=new Vue({
        el:"#app",
        data:{
            items: ["java","Linux","前端"]
        }
    });
</script>
</body>
</html>

#通讯

Axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线CDN-->
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <!--导入axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <!-- v-cloak:解决闪烁问题-->
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
<div>{{info.name}}</div>
<div>{{info.address.country}}</div>
    <a v-bind:href="info.url">点击</a>

</div>

<script>
    let vm = new Vue({
        el: "#app",
        //data：属性  vm
        //data()方法
        data(){
            return{
                //请求的返回参数合适，必须和json字符串一样
                info:{
                name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    },
                    url:null
                }
            }
        },

        mounted(){
            //钩子函数   链式编程  ES6新特性
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</body>
</html>

计算属性：计算出来的结果，保存在属性中~，内存中运行：虚拟DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层 模板-->
<div id="app">
    <todo>
        <!--
        v-bind  简写  ：
        -->
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" v-bind:index="index" v-on:remove="removeItem(index)" :key="index"></todo-items>
    </todo>
</div>


<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    //slot:插槽
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo-title"></slot>\
                         <ul>\
                              <slot name="todo-items"></slot>\
                         </ul>\
                     </div>'
    });
    Vue.component("todo-title",{
        /**
        * props:['title']和上面的 title进行绑定
        * */
        props:['title'],//传参
         template: '<div>{{title}}</div>'
    });

    Vue.component("todo-items",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}----{{item}}  <button @click="remove">删除</button></li>',
        methods:{
            remove:function (index) {
               //this.$emit自定义分发
                this.$emit('remove',index);
            }
        }
    });

//Vue 实例
    var vm=new Vue({
        el:"#app",
        data:{
            title:"sophy的暑假",
            todoItems:['sophy学java','sophy学前端','sophy学Linux']
        },
        methods:{
            removeItem:function (index) {
                console.log("删除了"+this.todoItems[index]+"ok")
                this.todoItems.splice(index,1);//一次只删除一个元素
            }
        }
    });
</script>
</body>
</html>