vue

什么是vue.js

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）

基本指令

vue.min.js 官网下载




    
    Document
    


    
        {{msg}}

v-cloak 指令

当引用的vue.js库没有完成加载时,html中的{{msg}}表达式就会展示成原始代码
可以在标签中加上 v-cloak,在style中设置display：none即可


    {{msg}}

插值表达式

{{msg}}

会出现上述表达式展示源码问题，但是该方式不会影响标签中除表达式外的其他内容
例：这是{{msg}}的内容

v-text="msg"

不会出现上述表达式展示源码问题，但是该方式会覆盖标签中的内容
例：vue text  
若msg是abc 则vue text将被替换成abc

v-html="msg"

如果需要向页面中写入HTML标签时,则需要使用 v-html

v-bind 用于绑定属性的指令

var  vm = new Vue({
    el:'#app',
    data:{  
          value1:'按钮'
    }
})

效果如下：

image.png

效果如下：

image.png

v-bind 简写方式, 效果一样

v-on:click 标签绑定单击事件

删除列表中的元素


        
            
                {{item.id}}
                {{item.name}}
                
                     // prevent  阻止默认事件
                    删除
                    删除1

var mv = new Vue({
        el:"#app",
        data:{
            list:[
                {id:'1' ,name :'zsa1'},
                {id:'2' ,name :'zsa2'},
                {id:'3' ,name :'zsa3'}
            ]
        },
        methods:{
            del(id){
                
                for(let i=0;i



跟进内容查询过滤集合数据


        
        
        
               {{item.name}}
        
    




如果 in 后面是一个数字 ,count则从1 开始

{{count}}


分支结构


只有表达式符合成立的标签才会展示

var  vm = new Vue({
    el:'#app',
    data:{
        score:'69'
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})

   
        良好
        优秀
        及格
    


v-show 功能与v-if相同，区别在于v-show的条件表达式为false时，实际上标签已经存在网页中，只不过设置成display:none
 而v-if 并不会将标签画出

var  vm = new Vue({
    el:'#app',
    data:{
        showFlag:false
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})

    
        演示v-show
    


 查看网页源码
 







image.png

 


v-for 与 v-if 集合使用

编号：{{user.id}},姓名：{{user.name}}


vue 的常用特性


表单特性 ：表单中的组件都是基于v-model进行数据绑定的


单选框,复选框,下拉选不需要配置相同的name组,只要绑定相同的v-model即可

 男
 女 

var  vm = new Vue({
    el:'#app',
    data:{
        sex:'1'
    },
    methods:{//在这里定义当前vue实例用到的函数
    }
})


sex 初始值时1 ,页面则默认选择男
注意： 下拉选的v-model 绑定在
        {{getInfo}}

postInfo() { var url = 'http://www.liulongbin.top:3005/api/post'; // post 方法接收三个参数： // 参数1：要请求的URL地址 // 参数2：要发送的数据对象 // 参数3：指定post提交的编码类型为 application/x-www-form-urlencoded this.$http.post(url, { name: 'zs' }, { emulateJSON: true }).then(res => { console.log(res.body); }); }

{{item.id}} -- {{item.name}} -- {{item.ctime}}

axios.get("http://localhost:9001/vue/get").then(function (response) { console.log(response.data); }); axios.post("http://localhost:9001/vue/post",{ name:"jack", age:"23" }).then(function (response) { //console.log(response); });

@RestController @RequestMapping("vue") public class VueTestController { @RequestMapping("/get") public User gerUser(){ User user = new User(); user.setName("jack"); user.setAge(12); return user; } @PostMapping("/post") public void setUser(@RequestBody User paramUser){ System.out.println(paramUser.getName()); System.out.println(paramUser.getAge()); } }

function getVue() { axios.get("http://localhost:9001/vue/get").then(function (response) { console.log(response.data); }); } function postVue() { axios.post("http://localhost:9001/vue/post",{ name:"jack", age:"23" }).then(function (response) { //console.log(response); }); } //返回结果处理 axios.all([getVue(),postVue()]).then(axios.spread(function (res1,res2) { console.log(res1.data); console.log(res2.data); }));

求和结果{{result}}

vue

什么是vue.js

基本指令

什么是组件

使用 props 属性动态传递参数

什么是Axios

为什么要使用 Axios

并发请求

什么是计算属性

npm安装vue ,vue-cli

你可能感兴趣的:(vue)