vue.js入门

安装工具

特点

JavaScript框架

简化Dom操作

响应式数据驱动

易用

在有HTML，CSS，JavaScript的基础上，快速上手。

灵活

简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

性能

20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化

el：挂载点

引js

<script type="text/javascript" src="./js/vue.js"></script>

  <div id="app">
        
  </div>

<script>
       var app=new Vue({
         el:"#app",
        
        })
</script>

vue实例作用的范围：vue会管理el选项命中的元素以及内部的后代元素

可以使用其他的选择器，但是建议使用id选择器

可以通过使用其他的双标签设置其他的dom元素不能使用html和body

data数据对象

<script>
       var app=new Vue({
         el:"#app",
         data:{
                obj:{}
                message:""
              }
        })
</script>

vue中使用的数据定义在data中

data中可以写复杂类型的数据

渲染复杂类型数据时遵守js的语法即可

通过vue实现常见的网页效果

Vue指令是以v-开头的特殊语法

常用Vue指令

v-text   设置标签的文本值 使用{{}}可以获得值

v-html   设置元素的innerHTML

  <div id="app">
      <p v-html=“content"></p>
  </div>






<script>
     var app = new Vue({
            el:"#app",
            data:{
          
                content:"<a href='#'>vue</a>"
            }
     })

</script>

v-on   为元素绑定事件

v-show    根据表达值的真假，切换元素的显示和隐藏

 <div id="app">
      <img src="地址" v-show="true">//显示
      <img src="地址" v-show=“isShow">//隐藏
      <img src="地址" v-show=“age>=18">
 </div>
 



<script>
    var app = new Vue({
            el:"#app",
            data:{
	            isShow:false,
	            age:16
            }
        })

</script>

v-if      根据表达值的真假，切换元素的显示和隐藏 与v-show相似

<div id="app">
      <p v-if="true">我是一个p标签</p>
      <p v-if="isShow">我是一个p标签</p>
      <p v-if="表达式">我是一个p标签</p>
</div>
 

<script>
    var app = new Vue({
          el:"#app",
          data:{
    	       isShow:false
          }
        })
</script>

v-bind   设置元素的属性

 <div id="app">
      <img v-bind:src= "imgSrc" >
      <img v-bind:title="imgtitle+’!!!!’">
      <img v-bind:class="isActive?'active':‘’”>
      <img v-bind:class="{active:isActive}">
 </div>
 

 <div id="app">
      <img :src= "imgSrc" >
      <img :title="imgtitle+’!!!!’">
      <img :class="isActive?'active':‘’”>
      <img :class="{active:isActive}">
 </div>



<script>
    var app = new Vue({
            el:"#app",
            data:{
      i       mgSrc:"图片地址",
              imgTitle:"",
              isActive:false
       }
    })
</script>

v-for      根据数据生成列表结构

<div id="app">
      <ul>
         <li v-for="(item,index) in arr" :title="item">
         {{ index }}{{ item }}
        </li>
         <li v-for="(item,index) in objArr">
         {{ item.name }}
        </li>
      </ul>
</div>



<script>
    var app = new Vue({
        el: "#app",
        data: {
          arr: [1, 2, 3, 4, 5],
          objArr: [
            { name: "jack" }, 
            { name: "rose" }
            ]
        }
    })

</script>

v-model      获取和设置表单元素的值（双向绑定）

<div id="app">
      <input type="text" v-model="message" />
</div>





<script>
    var app = new Vue({
        el: "#app",
        data: {
          message: ""
        }
    })
</script>

Vue里边同样可以写方法

<!-- 官网提供的 axios 在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

例

<script>
        var app=new Vue({
          el:"#app",
          data:{
            message:[],
            city:"",
            aa:["北京","上海","广州","深圳"],
          },
          methods:{
            enterWord(){
              var that=this;
              axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city).then(function (result) {
                console.log(result);
                that.message=result.data.data.forecast;
              })
            },
            aaaa(city){
              var that=this;
              axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+city).then(function (result) {
                that.message=result.data.data.forecast;
              })
            }
          }
        })
    </script>

axious.请求方式.then（function（）{}）异步请求

可以当作java的前台界面，通过异步与java后台进行交互。 需要注意的是端口号不能相同

如何创建工程

首先安装node，必须先部署好jdk及其环境变量

打开cmd检测是否安装

部署vue-cli ：vue的脚手架用来搭建一个前端工程

然后输入vue ui

开始创建工程

点击手动

勾选

安装插件和依赖

网页样式可以从element官网复制所需样式

启动工程      npm run serve

main.js文件中导入axios插件

注：axios.defaults.baseURL使用和不需要再写IP和端口号，简化了代码

与jiava后端连接时需注意跨域问题，只需在后端控制层加上@CrossOrigin注解即可

与java交互例

请求方式有get，post，delete，put根据增删改查方法而定