vue 起飞 (杂)

怎么安装环境就不多BB了, 安装node https://blog.csdn.net/Mr_xiaozhou/article/details/93925375

安装项目

cd到要安装项目的位置

• vue init webpack 项目名
• npm install
• npm install -g vue-cli
• npm run dev      启动项目

 

上面时cl2的，下面说说cli3的用法：

npm uninstall vue-cli -g         删除cli2

npm install -g @vue/cli           安装cli3

• cd 到项目目录
• vue create 项目名
• 根据需要操作，空格时确认， a全选， a取消全选
• npm run serve     启动

<div id="app">
  {{ message }}
  <p v-for i in list >{{ i }}</p>
  <p v-for todo in todos >{{ todo.text }}</p>
</div>



var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'，
    list: ["123", "456"],
    todos: [
     { text: '学习 JavaScript' },
     { text: '学习 Vue' },
     { text: '整个牛项目' }
    ]
  },
  methods:{
     greet: function(time){
        return 'Good' + time + this.name
   }
  }
})

 

数据绑定

<a v-bind:href="website">花Q</a>
 不绑定不行

var vm = new Vue({
			el : "#app4",
			data : {
				website: "http://desky.xyz"
			},

渲染html

<p v-html="websiteTag"></p>

var vm = new Vue({
			el : "#app4",
			data : {
				websiteTag: "<a href='http://desky.xyz'>花Q</a>"

 

绑定事件

 

<button v-on:click="age++">加1</button>
<button v-on:click.once="age--">减1  只有第一次点击才生效</button>
<p>{{age}}</p>

var vm = new Vue({
			el : "#app4",
			data : {
				age: "22"
                // age: 22 也行


实现age数值的变化

绑定个函数

<button v-on:click="add">加10</button>
<p>{{age}}</p>




var vm = new Vue({
			el : "#app4",
			data : {
				age: 22
				
			},
			methods: {
				add: function(){
					this.age += 10
				}
			},

 

绑定鼠标事件

实现的就是在这个div 里面移动鼠标， 会自动获取鼠标的坐标， function(event)   这个enent是固定的

<div v-on:mousemove="updateXY" style="width: 500px; padding: 200px 20px; text-align: center; border: 1px solid #333;">
				{{ x }} {{ y }}
</div>



var vm = new Vue({
			el : "#app4",
			data : {
				x: 0, 
				y: 0
				
			},
			methods: {
				updateXY: function(event){
					this.x=event.offsetX;
					this.y=event.offsetY;
				}
			},

 

阻止事件  .stop

<div v-on:mousemove="updateXY" style="width: 500px; padding: 
200px 20px; text-align: center; border: 1px solid #333;">
		{{ x }} {{ y }}
		<span v-on:mousemove.stop="">鼠标悬停在这里只不会变化， stop后面不加函数名， 加了反而不行</span>
</div>


var vm = new Vue({
			el : "#app4",
			data : {
				x: 0, 
				y: 0
				
			},
			methods: {
				updateXY: function(event){
					this.x=event.offsetX;
					this.y=event.offsetY;
				}
			},

 

a标签实现函数不跳转

<a v-on:click="add" href="http://desky.xyz">フブキ</a>
<a v-on:click.prevent="add" href="http://desky.xyz">フブキ</a>



methods: {
	add: function(){
	  alert("平気だ");
	}
},




第一个标签， 弹完窗，会跳转
第二个标签， 弹完窗，不会跳转

监听键盘事件并实现数据的双向绑定

<input type="text" v-on:keyup="xx" ref="name">    这个属性必须时ref
{{name}}


var vm = new Vue({
	el : "#app4",
	data : {
		name: ""		
			},
	methods: {
		xx: function(){
			this.name=this.$refs.name.value     还必须时$refs
	    }

下面时vue最正统双向绑定

v-model

<input type="text" v-model="name">
{{name}}


连函数都不用写
var vm = new Vue({
		el : "#app4",
		data : {
			name: ""	
			},

 

关于方法和计算属性

方法

写在methods里的时非计算属性，是方法。

必须有返回值， 返回值是什么无所谓。

最关键的是data中的数据，被改变时，会重新加载dom，然后重新调用两个方法。

还有必须调用这个被改变得data<p>a {{a}}</p>

结果：

当a的值改变时，会调用两个方法，打印123和456

<button type="button" v-on:click="a++">add a</button>
<p>a {{a}}</p>
<p>{{ addToa() }}</p>
<p>{{ addTob() }}</p>
			
var vm = new Vue({
	el : "#app4",
	data : {
		a: 0,
	},
	methods: {
		addToa: function(){
			console.log(123)
			return "123";
		},
		addTob: function(){
			console.log(456)
			return "123";
		}		
	},

计算属性

首先调用的时候不能加()，

可以不在页面显示改变的值

但是函数返回的必须是改变的值

结果：

当a改变时，打印123， 改变时打印456

<button type="button" v-on:click="a++">+a</button>
<button type="button" v-on:click="b--"> -b</button>
<p>{{ addToa }}</p>
<p>{{ addTob }}</p>



var vm = new Vue({
	el : "#app4",
	data : {
		a: 0,
		b: 0
	},
	methods: {
	},
	computed:{
		addToa: function(){
			console.log(123)
			return this.a;
		},
		addTob: function(){
			console.log(456)
			return this.b;
		}		
	},

 

关于watch

它可以检测data值的变化

    export default {
        name: "test1",
        data() {
          return {
              msg: "66"
          }
        },
        watch:{
            msg(val, oldVal){
                alert(val + "这是变之前的值");
                alert(oldVal + "这是改变之后的值")
            }
        },