Vue的框架(了解)-技术文章-思凡资源网

前端MVC设计模式

MVC设计模式,其实就是将前端实现某个业务的所有代码划分为三部分
Model: 模型, 指数据模型,这个数据一般来自于服务器
View: 视图, 指页面标签内容
Controller:控制器, 指将数据展示到视图中的过程代码
前端MVC设计模式弊端: 需要在Controller控制器部分频繁进行DOM(遍历查找元素的代码)操作, 会影响执行效率.

M,V,VM设计模式

Model: 模型, 指数据模型,这个数据一般来自于服务器
View: 视图, 指页面标签内容
ViewModel:视图模型, 将页面中可能发生改变的元素和某个变量在内存中进行绑定,当变量的值发生改变时会从内存中直接找到对应的元素让其改变.

Vue

Vue框架是目前最流行的前端框架
Vue对象相当于MVVM设计模式中的VM, 负责将页面中可能发生改变的元素和变量进行绑定, 绑定完之后会不断监听变量的改变, 当变量的值发生改变时会自动找到对应的元素并改变其显示内容.

安装独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

 <script src="https://cn.vuejs.org/js/vue.min.js">官网链接地址<script>

模板语法

插值文本（数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值）
v-text="变量", 让元素的文本内容和变量进行绑定
使用 v-html 指令用于输出 html 代码：


    
    {{info}}
    
    
    
    {{info}}
    

<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            info:"文本相关练习",
            address:"地址杭州"
        }
    })
</script>

属性（HTML 属性中的值应使用 v-bind 指令）
v-bind:属性名="变量", 让元素的xxx属性和变量进行绑定可以省略掉v-bind



    
    
    
    
    超链接
    

<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            msg:"属性绑定测试",
            url:"http://www.baidu.com",
            imgUrl:"../b.jpg"
        }
    })
</script>

用户输入（input 输入框中我们可以使用 v-model 指令来实现双向数据绑定）
v-model="变量", 双向绑定, 当变量的值发生改变页面会跟着改变, 页面的内容改变时变量也会跟着改变,只有使用form表单中的控件时才会涉及到双向绑定.



    
    
    {{msg}}
    a     b
    
    男
    女
    {{gender}}

<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            msg:"双向绑定测试",
            gender:"男"
        }
    })
</script>

事件处理器（事件监听可以使用 v-on 指令）
v-on:事件名="方法", 事件绑定简写@事件名="方法" , 调用的方法必须声明在Vue里面的methods里面














...

...



    
    
    {{info}}

<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{info:"事件绑定"},
        methods:{
            f:function () {
                v.info="按钮1点击了";
            },
            ff(){
                v.info="按钮2点击了";
            }
        }
    })
</script>

条件判断v-if（条件判断使用 v-if 指令）
v-if 指令将根据表达式 isVisible的值(true 或 false )来决定
v-else 可以用 v-else 指令给 v-if 添加一个 "else" 块
v-else-if v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。
v-show 我们也可以使用 v-show 指令来根据条件展示元素



    
    刘德华
    
    刘苍松
    
    张学友

<script src="../js/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            isVisible:true
        }
    })
</script>

循环语句 (循环使用 v-for 指令)

v-for 指令需要以 car in arr 形式的特殊语法， car是源数据数组并且 arr是数组元素迭代的别名。


 
     
         国产车
         
             编号
             名字
             价格
             类型
         
         
             {{i+1}}
             {{car.name}}
             {{car.price}}
             {{car.type}}
         
     
 
 <script src="../js/vue.js"></script>
 <script>
     let v = new Vue({
         el:"div",
         data:{
             arr:[{name:"比亚迪",price:250000,type:"轿车"},
                 {name:"红旗",price:888888,type:"轿车"},
                 {name:"东风导弹",price:9999999999,type:"导弹"}]
         }
     })
 </script>

国产车
编号	名字	价格	类型
{{i+1}}	{{car.name}}	{{car.price}}	{{car.type}}

Ajax(axios) -GET

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.celinf.com/json_demo.json')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

Ajax(axios) -POST

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .post('https://www.celinf.com/axios_post.php')
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

阻止a标签跳转四种方法


我不会被跳转

我不会被跳转

我不会被跳转

我不会被跳转
<script>
  var fn = {
    skip_1: function() {
        console.log('我不会被跳转');
    },
    skip_2: function() {
        //阻止冒泡
        console.log('我不会被跳转')
        var event = event || window.event;
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }
}
  </script>

学习记录，如有侵权请联系删除