Vue入门,看完就会了!!!

什么是Vue?

Vue.js 是一个构建数据驱动的web界面的渐进式框架。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js借鉴了Angular以及React的一些核心思想,综合各自的长处进行了操作以及性能等方面的优化,进而打造出一款性能更优,学习更容易的MVVM框架。

Vue基础语法

  1. 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例 启动的 Var = new Vue({ })

基础语法

el : 它是获取执行vue的dom元素 - 初始化范围
data:储存数据
methods:执行的方法

  1. 绑定数据
    {{ }} 或者 v-text = " " 只能绑定纯文本;绑定html vue中 v-html
    2)事件绑定
    v-on:click=" " 简写:@click=" "
    绑定事件 事件中有event对象 函数采纳数为 $event
    操作数据 通过this操作
    3)其他指令
    v-for=“item in list” 循环 item循环到的数组值
    v-for ="(item,key) in list" key循环到的下标index
    v-model=" "表单元素value 不可直接{{ }} 获取 ,需要在vue初始化设置一下
    v-if 布尔值 为true 代表节点消失
    v-if 与 v-else-if v-else 可以构成判断
    v-show布尔值 为true 代表节点设置了display:none属性
    v-once 一次渲染

处理用户输入v-model


<div id="app">
      <!--v-model是一个指令,表示数据的双向绑定 关联实例中的data属性,在v-model的值里面跟的数据是一个js对象 -->
      <!-- 在vue中使用{{}}进行数据的绑定显示,里面的内容也是一个js表达式 -->
       
        <input type="text" v-model="txt" />  //输入内容反向
        <p>
        {{
          txt
            .split('')
            .reverse()
            .join('')
        }}
      </p>
      
      <hr /> 
      <input type="text" v-model="msg" /> //另外一种方式,正常输出
      <p>{{ msg }}</p>
 </div>
 
    <script src="./libs/vue.js"></script>  //引入vue.js文件
    
    <script>    
      var app = new Vue({       // new关键字创建一个类的实例
        el: '#app',                   // el表示实例的挂在节点,这是一个元素选择
        data: {             // data属性表示实例中使用的数据
          txt: '',
          msg: '',
        },
      });
    </script>

以上是一个最基础的vue中v-model 例子,接下来看一下v-for

    <div id="app">
      <p v-for="(v, i) in people" :key="i">
        索引:{{ i }},值:<span>{{ v }}</span>
      </p>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      // vm
      var app = new Vue({
        el: '#app',
        data: {
          people: [
            {  name: ' 新世界的卡密 半个橙子', age: 22,},
            { name: '啦啦啦',age: 23,  },
            { name: '少帮主', age: 22,
            },
          ],
        },
      });
         <!-- v-for
            循环每一项内容,可以循环数组,对象,字符串,数字
            v-for="v in data" v表示每一项的值
            v-for="(v,i) in data" v表示每一项的值 i表示索引
            在循环的时候需要为其添加一个key值,此值的作用是方便找到元素 好做页面更新
                : 表示数据绑定,属性值为一个js表达式
        -->

1.ajax 调用

<div id="root">  
      <ul>
        <li v-for="(p, i) in postss" :key="i">{{ i + 1 }}、{{ p.title }}</li>
      </ul>
    </div>
    <script src="./libs/vue.js"></script>
    <script src="./libs/axios.js"></script>
    <script>
      var vm = new Vue({
        el: '#root',
        data: {
          postss: [],
        },
      });
      // 获取数据进行展示
      axios.get('http://jsonplaceholder.typicode.com/posts').then(res => {
        vm.postss = res.data;
      });
    </script>

绑定属性 v-bind : id = “data内的属性值” 或者 :id = " data内的属性值 " 等这两种方法 ;不只绑定id 像 src title class name 等属性写法一样 !!!
计算属性 放在computed:{ 函数} 效率高 ,
methods设置效率低

1)v-show 小例子

  1. v-show 控制组件的显示和隐藏 设置 display
    <div id="app">
   
	      <div class="ball" v-show="isShow"></div>
	      <!-- @click 绑定事件 -->
	      <button @click="toggleHandle">{{ isShow ? '隐藏' : '显示' }}</button>
	  //  <button @click="toggleHandle">点击按钮</button>
    </div>
    
    <script src="./libs/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          isShow: true,
        },
        methods: {
          // 绑定的方法都写在这里
          toggleHandle() {
            // alert('toggle clicked');
            this.isShow = !this.isShow;
          },
        },
      });
    </script>

一个页面多个实例?

 <div id="app">
      <input type="text" v-model="person.name" />
      <input type="text" v-model="person.age" />
      <p>我的名字是{{ person.name }},我今年{{ person.age }}岁了</p>
    </div>
    <hr />
    <div id="root">
      <input type="text" v-model="person.name" />
      <input type="text" v-model="person.age" />
      <p>我的名字是{{ person.name }},我今年{{ person.age }}岁了</p>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      // 每一个页面中可以有多个vue实例
      var app = new Vue({   //实例一
        el: '#app',
        data: {
          person: {
            name: '',
            age: '',
          },
        },
      });

      var app = new Vue({  //实例二
        el: '#root',
        data: {
          person: {
            name: '',
            age: '',
          },
        },
      });
    </script>

2)v-for 简单小例子

<script src="./libs/vue.js" type="text/javascript" charset="utf-8"></script>
		<div id="aaa">
			<ul>
				<li v-for="(t,i) in tog">{{t.aa}}{{t.bb}}<span>后索引值:{{i}}</span></li>
			</ul>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: "#aaa",
				data: {
					tog:[
						{aa:起小点},
						{aa:大哥gogoing},
						{bb:雪鱼}  ]}	})
		</script>
// 起小点 后索引值:0
// 大哥gogoing 后索引值:1
// 雪鱼 后索引值:2

3)v-bind 行间样式设置 展现样式

  1. v-bind 单个使用,展现样式

v-bind:style = “{ color:activeColor, fontSize:fontSize+“px”}”

data:{
activeColor : “red”,
fontSize : 30
}

v-bind:style的对象语法十分直接一一看着非常像CSS ,
其实它是一个JavaScript对象;

2.v-bind 数组样式形式设置

v-bind:style=" [styleObjectA,styleObjectB] "

data:{
styleObjectA : {color:“red”},
styleObjectB : {fontSize:“30px”}

4)v-bind 类名class设置 展现样式

  1. 第一种 v-bind : class

v-bind:class="{“class-a” : isa , “class-b” : isb }"
isa isb 值为true 添加相应类名
isa isb 值为false 不添加类名

  1. 第二种:对象形式设置

<div:class = “calssobj”> < /div >

classobj : { active:true," class-a ": true,class-b ": true,}
如果很难理解,请看下面 class样式绑定的小例子吧!!

5)class样式绑定例子 展现样式

 <div id="app">

      <div class="nav">
        <ul>
          <!-- 通过点击事件设置selIndex的值 -->
          <li :class="selIndex==0? 'cur':''" @click="selIndex=0">首页</li>
          <li :class="selIndex==1? 'cur':''" @click="selIndex=1">列表页</li>
          <li :class="selIndex==2? 'cur':''" @click="selIndex=2">关于我们</li>
        </ul>
      </div>
      // 以上 用v-bind:class 设置样式,当触发class属性值的时候,三元运算符就起了作用;

 
      <ul>
        <li    : style="p.age<=16? stylesGreen: ' '  "     v-for="(p, i) in people"    : key="i"  >
          {{ i }}、{{ p.name }}
        </li>
      </ul>
    // 以上用  v-bind:style 设置样式,用三元运算符选择
     <!-- 通过:style方式可以动态的绑定一个样式效果 -->
    <!-- 通过class实现样式的绑定
          1. 可以绑定一个数组,数组元素的值为样式名
          2. 可以绑定一个对象,对象中的属性值为true的属性名对应的样式可以显示出来 -->

    // 以下 用v-bind:class 设置样式,
      <p :class="pClasses">狼王争霸赛!!</p>
      <p :class="pClasses2">狼王争霸赛!!</p>
    </div>

    <script src="./libs/vue.js"></script>
    
    
    <script>
      var app = new Vue({
          el: '#app',
          data: {
	          selIndex: 0, // 默认选中的值
	          pClasses: ['txt', 'txt-red', 'txt-26'],
	          pClasses2: {
	          txt: true,
	          'txt-red': false,
	          'txt-bgc': true,
        	  },
          people: [
            {name: '毕游侠',age: 31, },
            { name: '申屠', age: 30, },
            { name: 'JY',age: 29,}, ],
          stylesGreen: {
            color: 'red',
            fontSize: '2rem',
            // backgroundColor: 'green',
          },
        },
      });
    </script>

6)v-if 控制标签显示和隐藏

  1. v-if 是直接在html中移除标签
  2. v-show是通过样式控制节点的显示和隐藏
    <div id="app">
	      <div class="ball" v-if="isShow"></div>
	      <button @click="toggleHandle">{{ isShow ? '隐藏' : '显示' }}</button>
    </div>
    
    <script src="./libs/vue.js"></script>
    
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          isShow: true,
        },
        methods: {
          toggleHandle() {
            this.isShow = !this.isShow;
          },  },}); 
    </script>

7)filter-过滤器

 <div id="app">
      <input type="text" v-model="msg" />
      <!-- | 后面可以跟着一个过滤器,对数据进行处理,过滤器可以跟着写多个 -->
      <p>反转的数据为:{{ msg | reverseWord | upcaseWord }}</p>
      <p>反转并转为小写:{{ msg | reverseWord | lowcase }}</p>
      <input type="text" v-model="price" />
      <p>价格:{{ price | money }}</p>
    </div>
    <hr />
    <div id="root">
      <input type="text" v-model="msg" />
      <p>反转并转为小写:{{ msg | lowcase }}</p>
    </div>
    <script src="./libs/vue.js"></script>
    <script>
      // 过滤器可以对数据做一个格式化操作
      // 全局定义
      Vue.filter('lowcase', val => val.toLowerCase());

      var app = new Vue({
        el: '#app',
        data: {
          msg: '',
          price: 0,
        },
        // 过滤器,局部过滤器
        filters : {
          reverseWord(val) {
            return val
              .split('')
              .reverse()
              .join('');
          },
          upcaseWord(val) {
            return val.toUpperCase();
          },
          money(val) {
            return '¥' + val + '元';
          },
        },
      });

      var root = new Vue({
        el: '#root',
        data: {
          msg: '',
        },
      });
    </script>

MVC

是一个开发模式,m(model)v(view)c(controller)。
model       用来存储数据
view        用来展示数据
controller  用来控制数据的展示,串联view和model

MVVM

model       是用来存储数据
view        展示数据
view-model  是实现数据和视图的双向绑定

实现:todolist 代办事项

 <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="form-group">
            <label for="">事项</label>
            <!-- .enter表示按键修饰符 表示按下回车键 -->
            <input
              type="text"
              class="form-control"
              v-model="content"
              placeholder="请输入代办内容"
              @keyup.enter="save"  />
          </div>
          <button class="btn btn-primary" @click="save">提交</button>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <ul class="list-group">
            <li v-for="(t,i) in todoList" :key="i" class="list-group-item">
              <span>【{{ t.status == 0 ? '未完成' : '已完成' }}】</span>
              {{ t.content }}
              <button @click="endHandle(i)" v-if="t.status==0">完成</button>
              <button @click="delHandle(i)">删除</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <script src="./libs/vue.js"></script>
    
    <script>
      var app = new Vue({
        el: '.container',
        data: {
          content: '',
          todoList: [],
        },
        methods: {
          save() {
            this.todoList.push({
              id: Date.now(),
              content: this.content,
              status: 0,
            });
            this.content = '';
          },
          endHandle(i) {
            this.todoList[i].status = 1;
          },
          delHandle(i) {
            this.todoList.splice(i, 1);
          },
        },
      });
    </script>
  </body>
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值