VUE入门学习

                                                          一、vue入门学习

1、安装vue.js插件

当安装插件后无法new一个vue component文件时，需要进行配置

此时就可以new了，如下图

2、学习vue的入门demo

     ①、新建一个html，如下图

    
    




{
    {message}}

        ②、直接浏览器打开该html,message内容直接展示在div中

  ③、鼠标悬停查看动态绑定的提示信息！

    
    




    

        
            鼠标悬停查看动态绑定的提示信息
        

    

效果如右图

     ④、vue中的if判断

    
    




    
yes
    
No
    

    
等于1
    
等于2
    
等于其他

运行结果如右图

⑤、VUE的for循环使用

    
    




    

        {
    {list.title}}
    

运行后结果如右图

⑥、vue的事件绑定

    
    




    
        vue事件绑定
    

运行结果如右图

⑦、vue双向事件绑定

    
    




   输入内容：{
    {title}}

    

    选择性别：男
            女
    
选中的性别是：{
    {selectsex}}
    

    选择爱好：编程
            运维
            girl
    
选中的爱好是：{
    {selecthobby}}

    选择答案：
                A
                B
                C
            
    
选中的答案是：{
    {solution}}

运行后结果如右图，

⑧、vue组件

运行结果如右图

3、axios异步通信入门学习

①、异步读取json文件并回显

       json文件准备

{
  "name": "多吃肉",
  "age": 27,
  "lucky": true,
  "address": {
    "city": "信阳",
    "county": "新县",
    "country": "箭厂河乡"
  },
  "hobby": [
    {"title": "java",
      "content": "我爱学java"
    },
    {
      "title": "vue",
      "content": "我爱学vue"
    },
    {
      "title": "girl",
      "content": "我喜欢girl"
    }
  ]
}

 demo代码

    
        
        
    
    

        

            
{
    {info}}
            --------------------------------------------------
            
{
    {item.content}}
        


        
        
        
        
        
    

运行结果如下图

4、计算机属性computed

计算机属性的特性就是为了将不经常变化的计算结果进行缓存，已节约我们的开销。

    
    




    
nowTime1{
    {nowTime1()}}
    
nowTime2{
    {nowTime2}}

运行代码如下图

nowTime1中的世间会变化，而nowTime中的世间是没有变化的,当改变message的值时，nowTime2中的时间发生变化

5、插槽slot